import { activities } from "@/constants/routes/hotelPageParams"

import Card from "@/components/TempDesignSystem/Card"
import CardImage from "@/components/TempDesignSystem/Card/CardImage"
import Grids from "@/components/TempDesignSystem/Grids"
import { getLang } from "@/i18n/serverContext"

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

import type { ActivityCard } from "@/types/trpc/routers/contentstack/hotelPage"
import type { CardProps } from "@/components/TempDesignSystem/Card/card"

export default function ActivitiesCardGrid(activitiesCard: ActivityCard) {
  const lang = getLang()
  const hasImage = activitiesCard.backgroundImage

  const updatedCard: CardProps = {
    ...activitiesCard,
    id: activities[lang],
    theme: hasImage ? "image" : "primaryDark",
    primaryButton: hasImage
      ? {
          href: activitiesCard.contentPage.href,
          title: activitiesCard.ctaText,
          isExternal: false,
        }
      : undefined,
    secondaryButton: hasImage
      ? undefined
      : {
          href: activitiesCard.contentPage.href,
          title: activitiesCard.ctaText,
          isExternal: false,
        },
  }
  return (
    <section id={updatedCard.id}>
      <Grids.Stackable className={styles.desktopGrid}>
        <Card {...updatedCard} className={styles.spanThree} />
      </Grids.Stackable>
      <Grids.Stackable className={styles.mobileGrid}>
        <CardImage card={updatedCard} />
      </Grids.Stackable>
    </section>
  )
}
