import { useTheme } from "next-themes"

import { Toaster as Sonner } from "sonner"

import { CheckCircle2, AlertCircle, Info, AlertTriangle, Loader2 } from "lucide-react"

type ToasterProps = React.ComponentProps<typeof Sonner>

const Toaster = ({ ...props }: ToasterProps) => {

const { theme = "system" } = useTheme()

return (

<Sonner

theme={theme as ToasterProps["theme"]}

className="toaster group"

position="top-center"

toastOptions={{

classNames: {

toast:

"group toast group-[.toaster]:bg-white/95 group-[.toaster]:dark:bg-gradient-to-b group-[.toaster]:dark:from-[#1C1C1E] group-[.toaster]:dark:to-[#0A0A0C] group-[.toaster]:backdrop-blur-xl group-[.toaster]:text-zinc-900 group-[.toaster]:dark:text-[#F5F5F7] group-[.toaster]:border-black/10 group-[.toaster]:dark:border-white/10 group-[.toaster]:dark:border-t-white/20 group-[.toaster]:shadow-[0_12px_36px_rgba(0,0,0,0.08)] group-[.toaster]:dark:shadow-[0_20px_50px_rgba(0,0,0,0.8),inset_0_1px_0_rgba(255,255,255,0.12)] font-matter rounded-2xl border flex items-center gap-3 py-3.5 px-4.5",

title: "group-[.toast]:font-semibold group-[.toast]:text-zinc-900 group-[.toast]:dark:text-[#F5F5F7] text-[14px]",

description: "group-[.toast]:text-zinc-500 group-[.toast]:dark:text-[#86868B] text-[13px]",

actionButton:

"group-[.toast]:bg-black group-[.toast]:text-white group-[.toast]:dark:bg-white group-[.toast]:dark:text-black font-semibold px-3.5 py-1.5 rounded-full text-[13px] hover:scale-105 active:scale-95 transition-transform shadow-sm",

cancelButton:

"group-[.toast]:bg-black/5 group-[.toast]:dark:bg-white/10 group-[.toast]:text-zinc-600 group-[.toast]:dark:text-[#86868B] group-[.toast]:hover:text-zinc-900 group-[.toast]:dark:hover:text-[#F5F5F7] font-medium px-3.5 py-1.5 rounded-full text-[13px] hover:bg-black/10 hover:dark:bg-white/15 transition-colors",

icon: "group-[.toast]:text-black/70 group-[.toast]:dark:text-white/80",

success: "group-[.toast]:bg-gradient-to-tr group-[.toast]:from-green-500/10 group-[.toast]:to-transparent",

error: "group-[.toast]:bg-gradient-to-tr group-[.toast]:from-red-500/10 group-[.toast]:to-transparent",

warning: "group-[.toast]:bg-gradient-to-tr group-[.toast]:from-yellow-500/10 group-[.toast]:to-transparent",

info: "group-[.toast]:bg-gradient-to-tr group-[.toast]:from-blue-500/10 group-[.toast]:to-transparent",

},

}}

icons={{

success: <CheckCircle2 size={18} className="text-green-600 dark:text-green-400" />,

error: <AlertCircle size={18} className="text-red-600 dark:text-red-400" />,

info: <Info size={18} className="text-blue-600 dark:text-blue-400" />,

warning: <AlertTriangle size={18} className="text-yellow-600 dark:text-yellow-400" />,

loading: <Loader2 size={18} className="animate-spin text-black/50 dark:text-white/50" />

}}

{...props}

/>

)

}

export { Toaster }