import Icon from "./Icon";

type ToastState = {
  tone: "success" | "error" | "info";
  message: string;
};

type ToastProps = {
  toast: ToastState | null;
};

const toneIconClass: Record<ToastState["tone"], string> = {
  success: "bg-[#e6f7f0] text-[#177b55]",
  error: "bg-[#fff0f0] text-[#b94a4a]",
  info: "bg-[#eaf4fd] text-[#2675bf]",
};

export function Toast({ toast }: ToastProps) {
  if (!toast) return null;

  return (
    <div
      className="toast-enter fixed top-[82px] right-[21px] z-30 flex min-h-[46px] min-w-[260px] max-w-[410px] items-center gap-[9px] rounded-lg border border-[#cfdbe6] bg-white px-3.5 py-2.5 text-xs text-[#43566a] shadow-[0_12px_35px_rgb(20_42_66/14%)]"
      role="status"
    >
      <span
        className={`grid size-[27px] shrink-0 place-items-center rounded-full ${toneIconClass[toast.tone]}`}
      >
        <Icon name={toast.tone === "success" ? "check" : "info"} size={17} />
      </span>
      {toast.message}
    </div>
  );
}