import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import { Typography } from "@scandic-hotels/design-system/Typography"

import ButtonLink from "@/components/ButtonLink"
import { FacilityToIcon } from "@/components/ContentType/HotelPage/data"
import { getIntl } from "@/i18n"

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

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

export default async function AmenitiesList({
  detailedFacilities,
}: AmenitiesListProps) {
  const intl = await getIntl()
  const facilities = detailedFacilities.slice(0, 5)

  return (
    <section className={styles.amenitiesContainer}>
      <Typography variant="Title/Subtitle/md">
        <p>
          {intl.formatMessage({
            defaultMessage: "At the hotel",
          })}
        </p>
      </Typography>
      <div className={styles.amenityItemList}>
        {facilities.map((facility) => {
          const Icon = (
            <FacilityToIcon
              id={facility.id}
              className={styles.icon}
              color="Icon/Feedback/Neutral"
              size={20}
            />
          )
          return (
            <div className={styles.amenityItem} key={facility.id}>
              {Icon && Icon}
              <Typography
                variant="Body/Paragraph/mdRegular"
                className={styles.facility}
              >
                <p>{facility.name}</p>
              </Typography>
            </div>
          )
        })}
      </div>
      <ButtonLink
        href={`?s=${SidepeekSlugs.amenities}`}
        variant="Text"
        typography="Body/Paragraph/mdBold"
        scroll={false}
      >
        {intl.formatMessage({
          defaultMessage: "See all amenities",
        })}
        <MaterialIcon icon="chevron_right" size={24} color="CurrentColor" />
      </ButtonLink>
    </section>
  )
}
