import Image from "@/components/Image"
import Card from "@/components/TempDesignSystem/Card"
import {
  filterFacilityCards,
  isFacilityCard,
  isFacilityImage,
} from "@/utils/facilityCards"

import CardImage from "./CardImage"

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 (
    <div id={imageCard.card.id} className={styles.cardContainer}>
      <div className={styles.desktopCards}>
        {facilitiesCardGrid.map((card: FacilityCardType) =>
          isFacilityImage(card) && card.backgroundImage ? (
            <div
              key={card.id}
              className={`${styles.imageWrapper} ${getCardClassName(card)}`}
            >
              <Image
                className={styles.image}
                src={card.backgroundImage.url}
                alt={card.backgroundImage.meta.alt || ""}
                fill
                sizes="(min-width: 1367px) 700px, 900px"
              />
            </div>
          ) : (
            <Card {...card} key={card.id} className={getCardClassName(card)} />
          )
        )}
      </div>
      <div className={styles.mobileCards}>
        <CardImage card={imageCard.card} imageCards={imageCard.images} />
      </div>
    </div>
  )
}
