import { Toaster as Sonner } from 'sonner';
import { useTheme } from '../../contexts/ThemeContext';

export function Toaster() {
  const { theme } = useTheme();

  return (
    <Sonner
      theme={theme}
      position="top-right"
      closeButton
      expand={false}
      visibleToasts={5}
      duration={3500}
      className="toaster group"
      toastOptions={{
        classNames: {
          toast:
            'group toast group-[.toaster]:rounded-xl group-[.toaster]:border group-[.toaster]:border-border group-[.toaster]:bg-card group-[.toaster]:text-card-foreground group-[.toaster]:shadow-lg group-[.toaster]:backdrop-blur-sm group-[.toaster]:border-l-4',
          title: 'group-[.toast]:text-sm group-[.toast]:font-semibold group-[.toast]:text-foreground',
          description: 'group-[.toast]:text-sm group-[.toast]:text-muted-foreground',
          actionButton:
            'group-[.toast]:rounded-md group-[.toast]:bg-primary group-[.toast]:px-3 group-[.toast]:py-1.5 group-[.toast]:text-sm group-[.toast]:font-medium group-[.toast]:text-primary-foreground',
          cancelButton:
            'group-[.toast]:rounded-md group-[.toast]:bg-muted group-[.toast]:px-3 group-[.toast]:py-1.5 group-[.toast]:text-sm group-[.toast]:font-medium group-[.toast]:text-muted-foreground',
          closeButton:
            'group-[.toast]:border-border group-[.toast]:bg-card group-[.toast]:text-muted-foreground group-[.toast]:hover:bg-accent group-[.toast]:hover:text-accent-foreground',
          success: 'group-[.toaster]:border-l-emerald-500',
          error: 'group-[.toaster]:border-l-destructive',
          warning: 'group-[.toaster]:border-l-amber-500',
          info: 'group-[.toaster]:border-l-sky-500',
          default: 'group-[.toaster]:border-l-primary',
        },
      }}
    />
  );
}