/**
 * @file ToastNotice.tsx
 * @description Bottom-right success/error toast for the config explorer.
 * Tool-agnostic — the page owns the 5s auto-dismiss timer and passes the
 * message down.
 * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
 */

import { AlertCircle, Check, X } from "lucide-react";

export type Toast = { kind: "success" | "error"; message: string } | null;

export function ToastNotice({
  toast,
  onDismiss,
}: {
  toast: NonNullable<Toast>;
  onDismiss: () => void;
}) {
  const isErr = toast.kind === "error";
  return (
    <div className="fixed bottom-6 right-6 z-50 max-w-md">
      <div
        className={`rounded-lg border px-3 py-2 shadow-lg flex items-start gap-2 ${
          isErr
            ? "border-status-danger/50 bg-status-danger/15 text-status-danger"
            : "border-status-success/40 bg-status-success/10 text-status-success"
        }`}
      >
        {isErr ? (
          <AlertCircle className="w-4 h-4 flex-shrink-0 mt-0.5" />
        ) : (
          <Check className="w-4 h-4 flex-shrink-0 mt-0.5" />
        )}
        <span className="text-xs leading-relaxed flex-1 break-all">{toast.message}</span>
        <button
          onClick={onDismiss}
          className="text-current/70 hover:text-current p-0.5"
          aria-label="dismiss"
        >
          <X className="w-3 h-3" />
        </button>
      </div>
    </div>
  );
}