import { IconAlert, IconClose } from "./Icons";

export type Toast = { id: number; text: string; tone: "info" | "warn" };

export function Toasts({ toasts, onDismiss }: { toasts: Toast[]; onDismiss: (id: number) => void }) {
  return (
    <div className="toasts" role="status" aria-live="polite">
      {toasts.map(t => (
        <div key={t.id} className={`toast${t.tone === "warn" ? " warn" : ""}`}>
          {t.tone === "warn" && (
            <span className="toast-icon">
              <IconAlert size={15} />
            </span>
          )}
          <span className="toast-text">{t.text}</span>
          <button type="button" className="toast-x" aria-label="Dismiss notification" onClick={() => onDismiss(t.id)}>
            <IconClose size={13} />
          </button>
        </div>
      ))}
    </div>
  );
}