import { Toast } from "@/hooks/useToast";

interface ToastComponentProps {
  toast: Toast | null;
}

export function ToastComponent({ toast }: ToastComponentProps) {
  if (!toast) return null;

  return (
    <div
      className={`fixed top-4 right-4 z-50 rounded-lg px-5 py-3.5 text-sm font-medium shadow-2xl transition-all duration-300 animate-in slide-in-from-top-5 ${
        toast.type === "success"
          ? "bg-gradient-to-r from-green-50 to-emerald-50 text-green-800 border border-green-200/60 backdrop-blur-sm"
          : "bg-gradient-to-r from-red-50 to-rose-50 text-red-800 border border-red-200/60 backdrop-blur-sm"
      }`}
      role={toast.type === "success" ? "status" : "alert"}
    >
      <div className="flex items-center gap-2">
        {toast.type === "success" ? (
          <i className="bx bx-check-circle text-lg" />
        ) : (
          <i className="bx bx-error-circle text-lg" />
        )}
        {toast.message}
      </div>
    </div>
  );
}