import {
  RiCheckboxCircleLine,
  RiCloseCircleLine,
  RiErrorWarningLine,
  RiInformationLine,
  RiLoaderLine,
} from "@remixicon/react"
import { Toaster as Sonner, type ToasterProps } from "sonner"
import { useAppearance } from "@/hooks/use-appearance"

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

  return (
    <Sonner
      theme={resolvedAppearance}
      className="toaster group"
      gap={8}
      icons={{
        success: <RiCheckboxCircleLine className="size-4 text-emerald-500 dark:text-emerald-400" />,
        info:    <RiInformationLine    className="size-4 text-sky-500 dark:text-sky-400" />,
        warning: <RiErrorWarningLine   className="size-4 text-amber-500 dark:text-amber-400" />,
        error:   <RiCloseCircleLine    className="size-4 text-red-500 dark:text-red-400" />,
        loading: <RiLoaderLine         className="size-4 animate-spin text-muted-foreground" />,
      }}
      style={
        {
          "--normal-bg":     "var(--popover)",
          "--normal-text":   "var(--popover-foreground)",
          "--normal-border": "var(--border)",
          "--border-radius": "var(--radius-lg)",
        } as React.CSSProperties
      }
      toastOptions={{
        classNames: {
          toast:       "!rounded-xl !border !shadow-sm !font-sans",
          title:       "!text-sm !font-semibold",
          description: "!text-xs !text-muted-foreground",
          success: [
            "!bg-emerald-50 !border-emerald-200/80",
            "dark:!bg-emerald-950/25 dark:!border-emerald-700/40",
          ].join(" "),
          error: [
            "!bg-red-50 !border-red-200/80",
            "dark:!bg-red-950/25 dark:!border-red-700/40",
          ].join(" "),
          warning: [
            "!bg-amber-50 !border-amber-200/80",
            "dark:!bg-amber-950/25 dark:!border-amber-700/40",
          ].join(" "),
          info: [
            "!bg-sky-50 !border-sky-200/80",
            "dark:!bg-sky-950/25 dark:!border-sky-700/40",
          ].join(" "),
          actionButton: [
            "!bg-foreground !text-background",
            "!text-xs !font-medium !rounded-lg",
            "!px-3 !h-7 !shadow-none",
          ].join(" "),
          cancelButton: [
            "!bg-transparent !text-muted-foreground",
            "!text-xs !rounded-lg !border !border-border",
            "!px-3 !h-7 !shadow-none",
          ].join(" "),
        },
      }}
      {...props}
    />
  )
}

export { Toaster }