import type { HTMLAttributes } from "react";
import { cn } from "@/shared/utils";

type Tone = "info" | "success" | "warning" | "error";

interface InlineToastProps extends HTMLAttributes<HTMLDivElement> {
  visible: boolean;
  text: string;
  tone?: Tone;
}

export function InlineToast({
  visible,
  text,
  tone = "info",
  className = "",
  ...rest
}: InlineToastProps) {
  const toneClasses = {
    success: "bg-success-bg border-success-border text-success",
    warning: "bg-warning-bg border-warning-border text-warning",
    error: "bg-danger-bg border-danger-border text-danger",
    info: "bg-info-bg border-info-border text-info",
  }[tone];

  return (
    <div
      className={cn(
        "fixed bottom-6 right-6 z-50",
        visible ? "cp-toast-enter" : "cp-toast-exit pointer-events-none",
        className
      )}
      {...rest}
    >
      <div
        className={cn(
          "flex items-center gap-2 rounded-lg border px-4 py-3 shadow-lg min-w-[240px] text-sm font-medium",
          toneClasses
        )}
      >
        <span>{text}</span>
      </div>
    </div>
  );
}
