"use client";

import { motion, AnimatePresence } from "framer-motion";
import { CheckCircle2, AlertCircle, Info } from "lucide-react";

export interface ToastItem {
  id: string;
  message: string;
  kind?: "success" | "error" | "info";
}

export function Toasts({ toasts }: { toasts: ToastItem[] }) {
  return (
    <div className="pointer-events-none fixed bottom-6 left-1/2 z-[100] flex w-full max-w-sm -translate-x-1/2 flex-col items-center gap-2 px-4">
      <AnimatePresence>
        {toasts.map((t) => (
          <motion.div
            key={t.id}
            initial={{ opacity: 0, y: 16, scale: 0.96 }}
            animate={{ opacity: 1, y: 0, scale: 1 }}
            exit={{ opacity: 0, y: 8, scale: 0.96 }}
            className="pointer-events-auto flex w-full items-center gap-2.5 rounded-xl border border-white/10 bg-[#141417]/95 px-4 py-3 text-sm text-zinc-100 shadow-2xl backdrop-blur"
          >
            {t.kind === "error" ? (
              <AlertCircle className="h-4 w-4 shrink-0 text-red-400" />
            ) : t.kind === "info" ? (
              <Info className="h-4 w-4 shrink-0 text-sky-400" />
            ) : (
              <CheckCircle2 className="h-4 w-4 shrink-0 text-emerald-400" />
            )}
            <span>{t.message}</span>
          </motion.div>
        ))}
      </AnimatePresence>
    </div>
  );
}