"use client";

/**
 * Toaster — sonner mounted with our palette tokens, so toasts read the
 * same `--card`, `--foreground`, etc. variables the rest of the site uses.
 * That keeps notifications on-theme across all six light/dark palettes
 * without per-palette overrides.
 */

import { useTheme } from "next-themes";
import { Toaster as SonnerToaster } from "sonner";

export function Toaster() {
  const { resolvedTheme } = useTheme();
  return (
    <SonnerToaster
      theme={(resolvedTheme as "light" | "dark") || "light"}
      position="bottom-right"
      // SiteBottomNav sits at the viewport bottom on small screens
      // (md:hidden). Without this, sonner stacks toasts right on top of
      // the nav. 5rem clears the ~64px nav with a little breathing room.
      // Desktop is unaffected — the regular `offset` prop is left at
      // its default.
      mobileOffset={{ bottom: "5rem" }}
      richColors={false}
      closeButton
      toastOptions={{
        // Inline styles win over sonner's defaults, but stay token-driven
        // so the active palette is honoured.
        style: {
          background: "var(--card)",
          color: "var(--foreground)",
          border: "1px solid var(--border)",
        },
        classNames: {
          toast: "font-[family-name:var(--font-title)]",
          description: "text-[var(--muted-foreground)]",
          actionButton: "bg-[var(--primary)] text-[var(--primary-foreground)]",
        },
      }}
    />
  );
}