Toast

"use client";

import * as React from "react";
import { Toaster as SonnerToaster, toast } from "sonner";

export type ToasterProps = React.ComponentProps<typeof SonnerToaster>;

/**
 * Sonner `<Toaster />` preset styled to house tokens: popover surface,
 * shadow-overlay depth, concentric radius, both themes via CSS variables.
 * Pair with the typed `toast` re-export to fire notifications.
 */
export function Toaster({ toastOptions, ...props }: ToasterProps) {
  return (
    <SonnerToaster
      gap={8}
      offset={16}
      style={
        {
          "--normal-bg": "var(--popover)",
          "--normal-text": "var(--popover-foreground)",
          "--normal-border": "transparent",
          "--border-radius": "calc(var(--radius) + 2px)",
        } as React.CSSProperties
      }
      toastOptions={{
        classNames: {
          toast:
            "!bg-popover !text-popover-foreground !border-transparent !shadow-overlay !rounded-xl !font-sans",
          title: "!text-[13px] !font-medium",
          description: "!text-xs !text-muted-foreground",
          actionButton:
            "!bg-primary !text-primary-foreground !rounded-md !text-xs !font-medium",
          cancelButton:
            "!bg-secondary !text-secondary-foreground !rounded-md !text-xs !font-medium",
          icon: "!self-start !mt-0.5",
        },
        ...toastOptions,
      }}
      {...props}
    />
  );
}

export { toast };