"use client"

import { Toaster as Sonner } from "sonner"

type ToasterProps = React.ComponentProps<typeof Sonner>

const Toaster = ({ ...props }: ToasterProps) => {
  return (
    <Sonner
      position="top-center"
      toastOptions={{
        classNames: {
          toast:
            "group toast group flex items-center gap-2 w-full p-4 rounded-lg border bg-white text-gray-900 shadow-lg",
          title: "text-sm font-semibold",
          description: "text-sm text-gray-600",
          actionButton:
            "bg-blue-600 text-white text-sm font-medium px-3 py-1.5 rounded-md hover:bg-blue-700",
          cancelButton:
            "bg-gray-100 text-gray-600 text-sm font-medium px-3 py-1.5 rounded-md hover:bg-gray-200",
          success: "border-green-200 bg-green-50 text-green-800",
          error: "border-red-200 bg-red-50 text-red-800",
          warning: "border-yellow-200 bg-yellow-50 text-yellow-800",
          info: "border-blue-200 bg-blue-50 text-blue-800",
        },
      }}
      {...props}
    />
  )
}

export { Toaster }