/* Message d'erreur affiché en cas d'échec d'un appel API */

import { AlertCircle } from 'lucide-react';
import styles from './ErrorMessage.module.css';

export default function ErrorMessage({ message = 'Une erreur est survenue.', onRetry }) {
  /* role="alert" annonce l'erreur immédiatement au lecteur d'écran : elle
     apparaît après le chargement de la page, sans quoi elle passerait
     inaperçue pour un utilisateur non voyant. */
  return (
    <div className={styles.container} role="alert" aria-live="assertive">
      <AlertCircle size={20} color="var(--color-primary)" aria-hidden="true" />
      <p className={styles.text}>{message}</p>
      {onRetry && (
        <button className={styles.retryBtn} onClick={onRetry}>
          Réessayer
        </button>
      )}
    </div>
  );
}