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="bottom-left"
    theme="dark"
    toastOptions={{
      classNames: {
        toast:
          'group toast bg-surface/90 border border-border backdrop-blur-md text-text shadow-lg',
        title: 'text-text text-sm font-semibold',
        description: 'text-text-muted text-xs',
        actionButton:
          'bg-primary text-bg hover:bg-primary/90 rounded-md px-2 py-1 text-xs font-medium',
        cancelButton:
          'bg-surface-2 text-text-muted hover:bg-surface-offset rounded-md px-2 py-1 text-xs',
        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 }
