import { Toaster as Sonner } from 'sonner'

type ToasterProps = React.ComponentProps<typeof Sonner>

// Palette-mapped sonner toaster. Mount once near the App root; the
// `toast.*` API comes from `@/components/ToastContainer` which wraps
// sonner's `toast` with our legacy (title, message?, action?) shape so
// existing call sites don't need edits.
const Toaster = ({ ...props }: ToasterProps) => (
  <Sonner
    position="top-right"
    theme="dark"
    // Compact toasts: tight padding, smaller gap, single-line title+desc
    // so they don't hog the corner of the screen.
    gap={4}
    toastOptions={{
      classNames: {
        toast:
          'group toast !gap-1 !p-1.5 !min-h-0 !w-auto !min-w-0 bg-surface/90 border border-border backdrop-blur-md text-text shadow',
        title: 'text-text text-[11px] font-medium leading-tight',
        description: 'text-text-muted text-[10px] leading-tight',
        actionButton:
          '!h-5 bg-primary text-bg hover:bg-primary/90 rounded px-1.5 text-[10px] font-medium',
        cancelButton:
          '!h-5 bg-surface-2 text-text-muted hover:bg-surface-offset rounded px-1.5 text-[10px]',
        icon: '!size-3 !mr-1',
        success: 'border-l-2 border-l-pick',
        error: 'border-l-2 border-l-reject',
        info: 'border-l-2 border-l-primary',
        warning: 'border-l-2 border-l-star',
      },
    }}
    {...props}
  />
)

export { Toaster }
