import type { HTMLAttributes } from "react";

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 =
    tone === "success"
      ? "bg-green-50 border-green-200 text-green-800"
      : tone === "warning"
        ? "bg-amber-50 border-amber-200 text-amber-800"
        : tone === "error"
          ? "bg-red-50 border-red-200 text-red-800"
          : "bg-blue-50 border-blue-200 text-blue-800";

  return (
    <div
      className={`fixed bottom-6 right-6 z-50 transition-all duration-200 ${
        visible ? "opacity-100 translate-y-0" : "opacity-0 pointer-events-none translate-y-2"
      } ${className}`}
      {...rest}
    >
      <div
        className={`flex items-center gap-2 rounded-md border px-3 py-2 shadow-lg min-w-[220px] text-sm ${toneClasses}`}
      >
        <span>{text}</span>
      </div>
    </div>
  );
}
