import Header from "@/components/MyPages/Blocks/Header"
import Card from "@/components/TempDesignSystem/Card"
import Grids from "@/components/TempDesignSystem/Grids"

import styles from "./cardsGrid.module.css"

import { CardsGridProps } from "@/types/components/loyalty/blocks"

export default function CardsGrid({ cards_grid }: CardsGridProps) {
  return (
    <section className={styles.section}>
      <Header title={cards_grid.title} subtitle={cards_grid.preamble} />
      <Grids.Stackable>
        {cards_grid.cards.map((card) => (
          <Card
            theme={cards_grid.theme || "one"}
            key={card.system.uid}
            scriptedTopTitle={card.scripted_top_title}
            heading={card.heading}
            bodyText={card.body_text}
            secondaryButton={card.secondaryButton}
            primaryButton={card.primaryButton}
          />
        ))}
      </Grids.Stackable>
    </section>
  )
}