import React from 'react';
import { useToastStore } from '@/store';

export const ToastContainer: React.FC = () => {
  const { toasts, removeToast } = useToastStore();
  if (toasts.length === 0) return null;

  return (
    <div className="ultra-toast-container" role="log" aria-live="polite" aria-atomic="false">
      {toasts.map((toast) => (
        <div
          key={toast.id}
          className={`ultra-toast ultra-toast--${toast.type}`}
          role="alert"
        >
          <span className="ultra-toast__icon">
            {toast.type === 'success' ? '✓' : toast.type === 'error' ? '✕' : toast.type === 'warning' ? '⚠' : 'ℹ'}
          </span>
          <span className="ultra-toast__message">{toast.message}</span>
          <button
            className="ultra-toast__close"
            onClick={() => removeToast(toast.id)}
            aria-label="Dismiss notification"
          >
            ×
          </button>
        </div>
      ))}
    </div>
  );
};