import { useToastState, type ToastItem } from "./toastStore";

const iconMap: Record<string, string> = {
  success: "✓",
  error: "✕",
  info: "ℹ",
};

function ToastItemView({ item, onDismiss }: { item: ToastItem; onDismiss: (id: number) => void }) {
  return (
    <div className={`app-toast app-toast--${item.type}`} role="alert">
      <span className="app-toast__icon">{iconMap[item.type]}</span>
      <span className="app-toast__msg">{item.message}</span>
      {item.onRetry && (
        <button type="button" className="app-toast__retry" onClick={item.onRetry}>
          重试
        </button>
      )}
      <button type="button" className="app-toast__close" onClick={() => onDismiss(item.id)} aria-label="关闭">
        ×
      </button>
    </div>
  );
}

export default function ToastContainer() {
  const { items, dismiss } = useToastState();
  if (!items.length) return null;

  return (
    <div className="app-toast-container" aria-live="polite">
      {items.map((item) => (
        <ToastItemView key={item.id} item={item} onDismiss={dismiss} />
      ))}
    </div>
  );
}