import { _ } from "@/lib/translation"

import Card from "@/components/TempDesignSystem/Card"
import Title from "@/components/Title"

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

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

export default function CardGrid({ card_grid }: CardGridProps) {
  return (
    <section className={styles.container}>
      <header className={styles.titleContainer}>
        <Title as="h3" level="h2" weight="semiBold" uppercase>
          {card_grid.title}
        </Title>
        {card_grid.subtitle ? (
          <Title
            as="h5"
            level="h3"
            weight="regular"
            className={styles.subtitle}
          >
            {card_grid.subtitle}
          </Title>
        ) : null}
      </header>
      <div className={styles.cardContainer}>
        {card_grid.cards.map((card, i) => (
          <div className={styles.cardWrapper} key={`${card.title}+${i}`}>
            <Card
              subtitle={card.subtitle}
              title={card.title}
              link={card.link}
            />
          </div>
        ))}
      </div>
    </section>
  )
}