import { type ReactElement } from "react"
import React from "react"
import {
  CircleCheckIcon,
  InfoIcon,
  Loader2Icon,
  OctagonXIcon,
  TriangleAlertIcon,
} from "lucide-react"
import { Toaster as Sonner, type ToasterProps } from "sonner"

/**
 * Toaster — WealthX Design System (shadcn base)
 * Figma: https://www.figma.com/design/9V9F0NGVsif8LGmEhVjOcT/Design-System---shadcn?node-id=3094-7557
 *
 * Variants: Default | Success | Info | Warning | Error | Loading
 * Left accent strip (4px) applied to all status types via globals.css data-type selectors.
 * WealthX uses a custom ThemeProvider (not next-themes), so `theme` defaults to "light".
 */
function Toaster({ theme = "light", ...props }: ToasterProps): ReactElement {
  return <Sonner
    className="toaster group"
    icons={{
      success: <CircleCheckIcon className="size-4" />,
      info:    <InfoIcon className="size-4" />,
      warning: <TriangleAlertIcon className="size-4" />,
      error:   <OctagonXIcon className="size-4" />,
      loading: <Loader2Icon className="size-4 animate-spin" />,
    }}
    style={
      {
        "--normal-bg":     "var(--popover)",
        "--normal-text":   "var(--popover-foreground)",
        "--normal-border": "var(--border)",
        "--border-radius": "var(--radius)",
      } as React.CSSProperties
    }
    theme={theme}
    toastOptions={{
      classNames: {
        toast: "font-sans",
      },
    }}
    {...props}
  />
}

export { Toaster }