"use client"

import { Toaster as SonnerToaster } from "sonner"
import { CheckCircle2, XCircle, AlertTriangle, Info, Loader2 } from "lucide-react"

/**
 * App-wide toast surface. Styling lives in globals.css (targeting Sonner's
 * data-attributes) so the toast reads as part of the product's dark design
 * system; here we only set behavior and the brand-colored type icons.
 */
export function Toaster() {
  return (
    <SonnerToaster
      position="bottom-right"
      theme="dark"
      closeButton
      expand
      gap={12}
      offset={20}
      duration={4000}
      icons={{
        success: <CheckCircle2 className="h-[18px] w-[18px] text-emerald-400" />,
        error: <XCircle className="h-[18px] w-[18px] text-red-400" />,
        warning: <AlertTriangle className="h-[18px] w-[18px] text-amber-400" />,
        info: <Info className="h-[18px] w-[18px] text-indigo-400" />,
        loading: <Loader2 className="h-[18px] w-[18px] animate-spin text-indigo-400" />,
      }}
    />
  )
}