'use client'

import * as React from 'react'
import { cn } from '../../lib/utils'
import { useToast, type ToastVariant } from './use-toast'

const variantClasses: Record<ToastVariant, string> = {
  default: 'bg-background border-border text-foreground',
  destructive: 'bg-destructive border-destructive text-destructive-foreground',
  success: 'bg-green-50 border-green-200 text-green-900',
  warning: 'bg-yellow-50 border-yellow-200 text-yellow-900',
  info: 'bg-blue-50 border-blue-200 text-blue-900',
}

export function Toaster() {
  const { toasts, dismiss } = useToast()

  if (toasts.length === 0) return null

  return (
    <div
      className="fixed bottom-4 right-4 z-[100] flex flex-col gap-2 w-full max-w-sm"
      role="region"
      aria-label="Notifications"
    >
      {toasts.map((t) => (
        <div
          key={t.id}
          className={cn(
            'rounded-lg border p-4 shadow-lg transition-all animate-in slide-in-from-bottom-2 fade-in-0',
            variantClasses[t.variant ?? 'default']
          )}
          role="status"
          aria-live="polite"
        >
          <div className="flex items-start justify-between gap-2">
            <div className="flex-1">
              {t.title && (
                <div className="text-sm font-semibold">{t.title}</div>
              )}
              {t.description && (
                <div className="text-sm opacity-90 mt-1">{t.description}</div>
              )}
            </div>
            <button
              onClick={() => dismiss(t.id)}
              className="shrink-0 rounded-sm opacity-70 hover:opacity-100 transition-opacity"
              aria-label="Dismiss notification"
            >
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="16"
                height="16"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                strokeWidth="2"
                strokeLinecap="round"
                strokeLinejoin="round"
                aria-hidden="true"
              >
                <line x1="18" y1="6" x2="6" y2="18" />
                <line x1="6" y1="6" x2="18" y2="18" />
              </svg>
            </button>
          </div>
          {t.action && <div className="mt-2">{t.action}</div>}
        </div>
      ))}
    </div>
  )
}