Toast

"use client";

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

/**
 * Configured to our tokens: 400ms ease in, 200ms out, transitions not
 * keyframes, stack offsets −0.05 scale / −16px / −0.2 opacity, swipe-dismiss
 * at 45px. Auto-dismiss pauses on tab hide.
 *
 * Never the only channel for a critical error — toasts are timed and
 * dismissible; a failed payment persists inline.
 */
export function Toaster() {
  return (
    <SonnerToaster
      gap={8}
      offset={24}
      position="bottom-right"
      style={
        {
          "--toast-transition-duration": "400ms",
          "--width": "360px",
        } as React.CSSProperties
      }
      toastOptions={{
        classNames: {
          actionButton: "ml-auto rounded-sm bg-accent px-3 py-1.5 text-label font-medium text-accent-fg",
          cancelButton: "text-label text-text-secondary",
          description: "text-caption text-text-secondary",
          title: "text-body font-medium text-text-primary",
          toast:
            "flex w-full items-start gap-3 rounded-md border border-border bg-surface-raised p-4 shadow-elevation-2",
        },
        unstyled: true,
      }}
      visibleToasts={3}
    />
  );
}

export const toast = sonnerToast;