import Card from "@/components/TempDesignSystem/Card"
import CardImage from "@/components/TempDesignSystem/Card/CardImage"
import Grids from "@/components/TempDesignSystem/Grids"
import { filterFacilityCards, isFacilityCard } from "@/utils/facilityCards"

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

import type {
  CardGridProps,
  FacilityCardType,
} from "@/types/components/hotelPage/facilities"

export default function FacilitiesCardGrid({
  facilitiesCardGrid,
}: CardGridProps) {
  const imageCard = filterFacilityCards(facilitiesCardGrid)
  const nrCards = facilitiesCardGrid.length

  function getCardClassName(card: FacilityCardType): string {
    if (nrCards === 1) {
      return styles.spanThree
    } else if (nrCards === 2 && !isFacilityCard(card)) {
      return styles.spanTwo
    }
    return styles.spanOne
  }

  return (
    <section id={imageCard.card.id} className={styles.cardContainer}>
      <Grids.Stackable className={styles.desktopGrid}>
        {facilitiesCardGrid.map((card: FacilityCardType) => (
          <Card {...card} key={card.id} className={getCardClassName(card)} />
        ))}
      </Grids.Stackable>
      <Grids.Stackable className={styles.mobileGrid}>
        <CardImage card={imageCard.card} imageCards={imageCard.images} />
      </Grids.Stackable>
    </section>
  )
}
