import React from "react";

export default function ToastStack({ toasts, onDismiss }) {
  if (!toasts.length) return null;

  return (
    <div className="toast-stack">
      {toasts.map((toast) => (
        <div key={toast.id} className={`toast ${toast.tone || "info"}`}>
          <span>{toast.text}{toast.count > 1 ? ` (x${toast.count})` : ""}</span>
          <button type="button" className="ghost" onClick={() => onDismiss(toast)}>
            ✕
          </button>
        </div>
      ))}
    </div>
  );
}
