'use client';

import { useToast } from '@/hooks/use-toast';
import { X } from 'lucide-react';
import { AnimatePresence, motion } from 'framer-motion';

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

  return (
    <div className="fixed bottom-4 left-1/2 -translate-x-1/2 z-[100] flex flex-col gap-2 w-full max-w-sm px-4">
      <AnimatePresence>
        {toasts.map((toast) => (
          <motion.div
            key={toast.id}
            initial={{ opacity: 0, y: 20, scale: 0.95 }}
            animate={{ opacity: 1, y: 0, scale: 1 }}
            exit={{ opacity: 0, y: -10, scale: 0.95 }}
            className={`flex items-start gap-3 rounded-xl px-4 py-3 shadow-lg border ${
              toast.variant === 'destructive'
                ? 'bg-red-950/90 border-red-800 text-red-100'
                : toast.variant === 'success'
                ? 'bg-emerald-950/90 border-emerald-800 text-emerald-100'
                : 'bg-zinc-900/95 border-zinc-800 text-zinc-100'
            } backdrop-blur-md`}
          >
            <div className="flex-1 text-sm">{toast.title}</div>
            <button
              onClick={() => dismiss(toast.id)}
              className="shrink-0 opacity-60 hover:opacity-100 transition-opacity"
            >
              <X className="h-4 w-4" />
            </button>
          </motion.div>
        ))}
      </AnimatePresence>
    </div>
  );
}