import type { ToastItem } from "../hooks/useToast";
import styles from "./ToastContainer.module.css";

interface ToastContainerProps {
  toasts: ToastItem[];
}

export function ToastContainer({ toasts }: ToastContainerProps) {
  if (toasts.length === 0) return null;

  return (
    <div className={styles.container} role="status" aria-live="polite">
      {toasts.map((toast) => (
        <div key={toast.id} className={`${styles.toast} ${styles[toast.variant]}`}>
          {toast.message}
        </div>
      ))}
    </div>
  );
}
