import styles from "./processSection.module.css";

interface ProcessStep {
  number: string;
  title: string;
}

interface ProcessSectionProps {
  heading: string;
  lead: string;
  steps: ProcessStep[];
}

export default function ProcessSection({
  heading,
  lead,
  steps,
}: ProcessSectionProps) {
  return (
    <section className={styles.process} aria-labelledby="process-heading">
      <div className={styles.inner}>
        <div className={styles.intro}>
          <h2 id="process-heading" className={styles.heading}>
            {heading}
          </h2>
          <p className={`lead ${styles.lead}`}>{lead}</p>
        </div>

        <div className={styles.steps}>
          {steps.map((step) => (
            <div key={step.number} className={styles.step}>
              <span className={styles.stepNumber} aria-hidden="true">
                {step.number}
              </span>
              <span className={styles.stepTitle}>{step.title}</span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}