---
import SectionContent from "./SectionContent.astro";
import type {
  SectionHeadingHProp,
  SectionPointsContentProps,
} from "./Section.types";

type Props = SectionPointsContentProps;

const { heading, items, cols } = Astro.props;
---

<div
  class:list={[
    "section-points",
    !cols || cols === "flex"
      ? "section-points-flex"
      : `section-points-cols-${cols}`,
  ]}
>
  {
    items.map((item) => {
      const h = heading ? ((heading.h + 1) as SectionHeadingHProp) : 3;
      return (
        <div>
          <SectionContent
            heading={{ h }}
            t={item.content.en}
            icon={item.icon}
          />
        </div>
      );
    })
  }
</div>
