import { CheckCircleIcon } from "@phosphor-icons/react/dist/ssr";
import styles from "./maintenanceCleaningSection.module.css";

interface MaintenanceCleaningSectionProps {
  heading: string;
  lead: string;
  requirements: string[];
}

export default function MaintenanceCleaningSection({
  heading,
  lead,
  requirements,
}: MaintenanceCleaningSectionProps) {
  return (
    <section
      className={styles.maintenanceCleaning}
      aria-labelledby="maintenance-cleaning-heading"
    >
      <div className={styles.inner}>
        <div className={styles.intro}>
          <h3 id="maintenance-cleaning-heading" className={styles.heading}>
            {heading}
          </h3>
          <p className={`lead ${styles.lead}`}>{lead}</p>
        </div>

        <div className={styles.grid}>
          {requirements.map((requirement) => (
            <article key={requirement} className={styles.card}>
              <span className={styles.iconWrap} aria-hidden="true">
                <CheckCircleIcon size={24} weight="duotone" />
              </span>
              <p className={styles.cardText}>{requirement}</p>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}