import { useTheme } from "../../components/ThemeProvider"
import { Toaster as Sonner } from "sonner"

type ToasterProps = React.ComponentProps<typeof Sonner>

const Toaster = ({ ...props }: ToasterProps) => {
  const { theme = "system" } = useTheme()
  
  // Define background and foreground colors based on theme
  const bgColor = theme === 'dark' ? '#1a1b1e' : '#ffffff';
  const textColor = theme === 'dark' ? '#ffffff' : '#000000';
  const borderColor = theme === 'dark' ? 'rgba(255,255,255,0.1)' : 'rgba(0,0,0,0.1)';

  return (
    <div 
      className="fixed bottom-0 right-0 z-[9999] p-4 pointer-events-none"
      style={{ 
        backgroundColor: 'transparent',
      }}
    >
      <Sonner
        theme={theme as ToasterProps["theme"]}
        className="toaster group z-[9999]"
        position="bottom-right"
        expand={false}
        richColors
        closeButton
        toastOptions={{
          classNames: {
            toast: "group toast",
            description: "group-[.toast]:text-muted-foreground",
            actionButton: "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
            cancelButton: "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
          },
          duration: 5000,
          style: {
            border: `1px solid ${borderColor}`,
            padding: '16px',
            borderRadius: '6px',
            backgroundColor: bgColor,
            color: textColor,
            opacity: '1',
            boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)',
          },
        }}
        {...props}
      />
    </div>
  )
}

export { Toaster }