import * as React from "react";
import { useToastState } from "./use-toast";
import { CheckCircle2, AlertCircle, Info, X } from "lucide-react";
import { cn } from "../../lib/utils";

export function Toaster() {
  const toasts = useToastState();

  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-[320px]">
      {toasts.map((t) => (
        <div
          key={t.id}
          className={cn(
            "flex items-center gap-3 rounded-lg border p-4 shadow-lg animate-in slide-in-from-right-full duration-300",
            t.type === "success" && "bg-emerald-50 border-emerald-200 text-emerald-800 dark:bg-emerald-950 dark:border-emerald-800 dark:text-emerald-200",
            t.type === "error" && "bg-rose-50 border-rose-200 text-rose-800 dark:bg-rose-950 dark:border-rose-800 dark:text-rose-200",
            t.type === "info" && "bg-blue-50 border-blue-200 text-blue-800 dark:bg-blue-950 dark:border-blue-800 dark:text-blue-200"
          )}
        >
          {t.type === "success" && <CheckCircle2 className="h-5 w-5 shrink-0" />}
          {t.type === "error" && <AlertCircle className="h-5 w-5 shrink-0" />}
          {t.type === "info" && <Info className="h-5 w-5 shrink-0" />}
          <p className="text-sm font-medium leading-none">{t.message}</p>
        </div>
      ))}
    </div>
  );
}