// shadcn Toast — minimal CSS-driven; appears bottom-right when the
// `[data-state="open"]` attribute is on the root. Apps set + clear
// the attribute via tiny client JS or via form-redirect query
// params (`?toast=saved`). Sonner is the canonical shadcn dep —
// drop in when richer behaviour matters.

import type { HTMLAttributes, ReactNode } from 'react'
import { cn } from '../cn'

interface ToastProps extends HTMLAttributes<HTMLDivElement> {
  readonly variant?: 'default' | 'destructive' | 'success'
}

const variantClasses = {
  default:     'bg-card text-card-foreground border',
  destructive: 'bg-destructive text-white border-destructive',
  success:     'bg-emerald-600 text-white border-emerald-600',
} as const

export const Toast = ({ variant = 'default', className, children, ...props }: ToastProps): ReactNode => (
  <div
    data-slot="toast"
    role="status"
    aria-live="polite"
    className={cn(
      'fixed bottom-4 right-4 z-50 max-w-md rounded-md border shadow-lg p-4',
      'data-[state=closed]:hidden',
      'data-[state=open]:animate-in data-[state=open]:slide-in-from-bottom-2 data-[state=open]:fade-in-0',
      variantClasses[variant],
      className,
    )}
    {...props}
  >
    {children}
  </div>
)

export const ToastTitle = ({ className, ...props }: HTMLAttributes<HTMLParagraphElement>): ReactNode => (
  <p data-slot="toast-title" className={cn('text-sm font-semibold', className)} {...props} />
)

export const ToastDescription = ({ className, ...props }: HTMLAttributes<HTMLParagraphElement>): ReactNode => (
  <p data-slot="toast-description" className={cn('text-sm opacity-90', className)} {...props} />
)