import SectionContainer from "@/components/Section/Container"
import { getIntl } from "@/i18n"
import { isFacilityCard, setFacilityCardGrids } from "@/utils/facilityCards"

import ActivitiesCardGrid from "./CardGrid/ActivitiesCardGrid"
import FacilitiesCardGrid from "./CardGrid"

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

import type {
  Facilities,
  FacilitiesProps,
  FacilityCardType,
  FacilityGrid,
} from "@/types/components/hotelPage/facilities"

export default async function Facilities({
  facilities,
  activitiesCard,
}: FacilitiesProps) {
  const intl = await getIntl()

  const facilityCardGrids = setFacilityCardGrids(facilities)

  const translatedFacilityGrids: Facilities = facilityCardGrids.map(
    (cardGrid: FacilityGrid) => {
      return cardGrid.map((card: FacilityCardType) => {
        if (isFacilityCard(card)) {
          return {
            ...card,
            heading: intl.formatMessage({ id: card.heading }),
            secondaryButton: {
              ...card.secondaryButton,
              title: intl.formatMessage({
                id: card.secondaryButton.title,
              }),
            },
          }
        }
        return card
      })
    }
  )

  return (
    <SectionContainer className={styles.grid}>
      {translatedFacilityGrids.map((cardGrid: FacilityGrid) => (
        <FacilitiesCardGrid
          key={cardGrid[0].id}
          facilitiesCardGrid={cardGrid}
        />
      ))}
      {activitiesCard && <ActivitiesCardGrid {...activitiesCard} />}
    </SectionContainer>
  )
}
