import { useTranslation } from 'react-i18next';
import styles from './error-banner.module.css';

interface ErrorBannerProps {
  readonly message: string;
  readonly onDismiss?: () => void;
}

export function ErrorBanner({ message, onDismiss }: ErrorBannerProps) {
  const { t } = useTranslation();

  return (
    <div className={styles.banner} role="alert">
      <span className={styles.icon} aria-hidden="true">!</span>
      <span className={styles.message}>{message}</span>
      {onDismiss && (
        <button
          className={styles.dismiss}
          onClick={onDismiss}
          aria-label={t('common.dismissError')}
          type="button"
        >
          &#10005;
        </button>
      )}
    </div>
  );
}
