const ESTILOS = {
  info: { bg: "#2C3E50", color: "white", icono: "ti-info-circle" },
  exito: { bg: "#1E8449", color: "white", icono: "ti-check" },
  error: { bg: "#C0392B", color: "white", icono: "ti-x" },
};

// Aviso flotante breve, de solo lectura: se controla desde el hook useToast.
export default function Toast({ toast }) {
  if (!toast) return null;
  const { bg, color, icono } = ESTILOS[toast.tipo] || ESTILOS.info;
  return (
    <div key={toast.key} role="status" aria-live="polite" style={{
      position: "fixed", left: "50%", bottom: 24, transform: "translateX(-50%)",
      background: bg, color, padding: "10px 18px", borderRadius: 999, fontSize: 13,
      fontWeight: 500, boxShadow: "0 6px 20px rgba(0,0,0,0.18)", zIndex: 2000,
      display: "flex", alignItems: "center", gap: 8, maxWidth: "90vw",
      animation: "localesp-toast-in 0.25s ease-out",
    }}>
      <i className={`ti ${icono}`} aria-hidden="true" style={{ fontSize: 15 }}></i>
      {toast.mensaje}
      <style>{"@keyframes localesp-toast-in{from{opacity:0;transform:translate(-50%,10px)}to{opacity:1;transform:translate(-50%,0)}}"}</style>
    </div>
  );
}