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

import CardImage from "./CardImage"

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 hasImage = activitiesCard.backgroundImage

  const updatedCard: CardProps = {
    ...activitiesCard,
    theme: hasImage ? "image" : "primaryDark",
    primaryButton: hasImage
      ? {
          href: `?s=${activitiesCard.sidepeekSlug}`,
          title: activitiesCard.ctaText,
          isExternal: false,
          scrollOnClick: false,
        }
      : undefined,
    secondaryButton: hasImage
      ? undefined
      : {
          href: `?s=${activitiesCard.sidepeekSlug}`,
          title: activitiesCard.ctaText,
          isExternal: false,
          scrollOnClick: false,
        },
  }
  return (
    <div>
      <div className={styles.desktopCards}>
        <Card {...updatedCard} className={styles.spanThree} />
      </div>
      <div className={styles.mobileCards}>
        <CardImage card={updatedCard} />
      </div>
    </div>
  )
}
