web/components/Loyalty/Blocks/CardsGrid/index.tsx

import SectionContainer from "@/components/Section/Container"
import SectionHeader from "@/components/Section/Header"
import Card from "@/components/TempDesignSystem/Card"
import Grids from "@/components/TempDesignSystem/Grids"
import LoyaltyCard from "@/components/TempDesignSystem/LoyaltyCard"

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

export default function CardsGrid({
  cards_grid,
  firstItem = false,
}: CardsGridProps) {
  return (
    <SectionContainer>
      <SectionHeader
        title={cards_grid.title}
        subtitle={cards_grid.preamble}
        topTitle={firstItem}
      />
      <Grids.Stackable>
        {cards_grid.cards.map((card) => {
          switch (card.__typename) {
            case LoyaltyCardsGridEnum.LoyaltyCard:
              return (
                <LoyaltyCard
                  key={card.system.uid}
                  image={card.image}
                  heading={card.heading}
                  bodyText={card.body_text}
                  link={card.link}
                />
              )
            case LoyaltyCardsGridEnum.Card: {
              return (
                <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>
    </SectionContainer>
  )
}