import type { AppError } from '../hooks/useErrorHandler';

interface ErrorDisplayProps {
  error: AppError;
  onDismiss: () => void;
}

export function ErrorDisplay({ error, onDismiss }: ErrorDisplayProps): JSX.Element {
  return (
    <div
      role="alert"
      aria-live="assertive"
      style={{
        padding: '1rem',
        backgroundColor: '#fee',
        border: '1px solid #fcc',
        borderRadius: '0.5rem',
        marginBottom: '1rem',
      }}
    >
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'start' }}>
        <div>
          <strong>Erreur</strong>
          {error.code !== undefined && (
            <span style={{ marginLeft: '0.5rem', fontSize: '0.875rem' }}>
              ({error.code})
            </span>
          )}
          <p>{error.message}</p>
          {error.details !== undefined && (
            <details style={{ marginTop: '0.5rem' }}>
              <summary style={{ cursor: 'pointer', fontSize: '0.875rem' }}>
                Détails techniques
              </summary>
              <pre style={{ fontSize: '0.75rem', marginTop: '0.5rem', overflow: 'auto' }}>
                {JSON.stringify(error.details, null, 2)}
              </pre>
            </details>
          )}
        </div>
        <button
          onClick={onDismiss}
          aria-label="Fermer l'erreur"
          style={{
            background: 'none',
            border: 'none',
            fontSize: '1.5rem',
            cursor: 'pointer',
            padding: '0 0.5rem',
          }}
        >
          ×
        </button>
      </div>
    </div>
  );
}