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

import { mapFacilityToIcon } from "@/components/ContentType/HotelPage/data"
import { ChevronRightSmallIcon } from "@/components/Icons"
import Link from "@/components/TempDesignSystem/Link"
import Body from "@/components/TempDesignSystem/Text/Body"
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
import { getIntl } from "@/i18n"
import { getLang } from "@/i18n/serverContext"

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

import type { AmenitiesListProps } from "@/types/components/hotelPage/amenities"

export default async function AmenitiesList({
  detailedFacilities,
}: AmenitiesListProps) {
  const intl = await getIntl()
  const facilities = detailedFacilities.slice(0, 5)
  const lang = getLang()
  return (
    <section className={styles.amenitiesContainer}>
      <Subtitle type="two" color="black">
        {intl.formatMessage({ id: "At the hotel" })}
      </Subtitle>
      <div className={styles.amenityItemList}>
        {facilities.map((facility) => {
          const IconComponent = mapFacilityToIcon(facility.id)
          return (
            <div className={styles.amenityItem} key={facility.id}>
              {IconComponent && (
                <IconComponent
                  className={styles.icon}
                  color="grey80"
                  width={20}
                  height={20}
                />
              )}
              <Body color="textMediumContrast">{facility.name}</Body>
            </div>
          )
        })}
      </div>
      <Link
        scroll={false}
        href={`?s=${amenities[lang]}`}
        color="burgundy"
        variant="icon"
        className={styles.showAllAmenities}
      >
        {intl.formatMessage({ id: "Show all amenities" })}
        <ChevronRightSmallIcon color="burgundy" />
      </Link>
    </section>
  )
}
