"use client";

import { Toaster as SonnerToaster } from "sonner";
import { useTheme } from "@/app/lib/theme";

export function Toaster() {
  const { resolved } = useTheme();
  return (
    <SonnerToaster
      position="bottom-right"
      gap={8}
      toastOptions={{
        unstyled: false,
        classNames: {
          toast:
            "group flex w-full items-start gap-3 rounded-lg border border-border bg-card px-4 py-3.5 shadow-lg text-foreground",
          title: "text-sm font-semibold leading-tight",
          description: "text-xs text-muted-foreground mt-0.5 leading-relaxed",
          closeButton:
            "absolute right-2 top-2 rounded p-0.5 opacity-40 hover:opacity-100 transition-opacity",
          success:
            "!border-success-border !bg-card [&_[data-icon]]:text-success",
          error:
            "!border-destructive-border !bg-card [&_[data-icon]]:text-destructive",
          warning:
            "!border-warning-border !bg-card [&_[data-icon]]:text-warning",
          info: "!border-info-border !bg-card [&_[data-icon]]:text-info",
        },
      }}
      theme={resolved}
      richColors
      closeButton
      expand={false}
      visibleToasts={5}
    />
  );
}
