'use client';

import type { Toast } from '@/lib/useToasts';

// ISS-008 (v0.17.0): the bottom-right toast stack — action errors and game events derived
// from snapshot diffs. Fixed-position overlay above the map; each item auto-dismisses via
// the hook's TTL or its × button.
export default function ToastStack({ toasts, onDismiss }: { toasts: Toast[]; onDismiss?: (id: number) => void }) {
  if (toasts.length === 0) return null;
  return (
    <div className="toasts" role="status">
      {toasts.map((t) => (
        <div key={t.id} data-testid="toast" className={`toast toast-${t.kind}`}>
          <span>{t.message}</span>
          {onDismiss && (
            <button type="button" data-testid={`toast-dismiss-${t.id}`} className="toast-close" onClick={() => onDismiss(t.id)}>
              ×
            </button>
          )}
        </div>
      ))}
    </div>
  );
}