import { Icon } from '@/components/foundation/Icon';
import styles from './ErrorSummary.module.css';

export interface FormErrorItem {
  fieldId: string;
  message: string;
}

export function ErrorSummary({ title, errors }: { title: string; errors: FormErrorItem[] }) {
  if (errors.length === 0) return null;
  return (
    <section
      className={styles.summary}
      role="alert"
      aria-labelledby="form-error-summary-title"
      tabIndex={-1}
    >
      <div className={styles.heading}>
        <Icon name="error" />
        <h2 id="form-error-summary-title">{title}</h2>
      </div>
      <ul>
        {errors.map((error) => (
          <li key={error.fieldId}>
            <a href={`#${error.fieldId}`}>{error.message}</a>
          </li>
        ))}
      </ul>
    </section>
  );
}
