import { useState, useEffect } from "react";

export default function Toast() {
  const [message, setMessage] = useState("");
  const [visible, setVisible] = useState(false);

  useEffect(() => {
    const handler = (e) => {
      setMessage(e.detail.message);
      setVisible(true);
      setTimeout(() => setVisible(false), 3500);
    };
    window.addEventListener("signal-toast", handler);
    return () => window.removeEventListener("signal-toast", handler);
  }, []);

  if (!visible) return null;

  return (
    <div className="fixed bottom-6 right-6 bg-[var(--bg-elevated)] border border-[var(--brand)] rounded-lg px-[18px] py-3 text-[13px] text-[var(--text-primary)] z-[100] shadow-[var(--shadow-card-md)]">
      {message}
    </div>
  );
}