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

interface ConceptPillar {
  number: string;
  title: string;
  points: string[];
}

interface ConceptResults {
  heading: string;
  intro: string;
  points: string[];
}

interface ConceptSectionProps {
  heading: string;
  lead: string;
  pillars: ConceptPillar[];
  results: ConceptResults;
}

export default function ConceptSection({
  heading,
  lead,
  pillars,
  results,
}: ConceptSectionProps) {
  return (
    <section className={styles.concept} aria-labelledby="concept-heading">
      <div className={styles.inner}>
        <div className={styles.intro}>
          <h2 id="concept-heading" className={styles.heading}>
            {heading}
          </h2>
          <p className={styles.lead}>{lead}</p>
        </div>

        <div className={styles.bento}>
          {pillars.map((pillar) => (
            <article key={pillar.number} className={styles.pillarCard}>
              <span className={styles.number}>{pillar.number}</span>
              <h3 className={styles.pillarTitle}>{pillar.title}</h3>
              <ul className={styles.pointList}>
                {pillar.points.map((point) => (
                  <li key={point} className={styles.point}>
                    <span className={styles.pointIcon} aria-hidden="true">
                      <CheckCircleIcon size={16} weight="duotone" />
                    </span>
                    {point}
                  </li>
                ))}
              </ul>
            </article>
          ))}

          <article className={styles.resultsCard}>
            <h3 className={styles.resultsHeading}>{results.heading}</h3>
            <p className={styles.resultsIntro}>{results.intro}</p>
            <ul className={styles.pointList}>
              {results.points.map((point) => (
                <li key={point} className={styles.point}>
                  <span className={styles.pointIcon} aria-hidden="true">
                    <CheckCircleIcon size={16} weight="duotone" />
                  </span>
                  {point}
                </li>
              ))}
            </ul>
          </article>
        </div>
      </div>
    </section>
  );
}