import { Typography } from "@scandic-hotels/design-system/Typography"
import { FacilityEnum } from "@scandic-hotels/trpc/enums/facilities"

import { FacilityToIcon } from "../TEMP/FacilityToIcon"

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

import type { DetailedFacility } from "@scandic-hotels/trpc/types/hotel"

interface AdditionalAmenitiesProps {
  amenities: DetailedFacility[]
}

export default function AdditionalAmenities({
  amenities,
}: AdditionalAmenitiesProps) {
  const amenitiesToIgnore = [
    FacilityEnum.ParkingAdditionalCost,
    FacilityEnum.ParkingElectricCharging,
    FacilityEnum.ParkingFreeParking,
    FacilityEnum.ParkingGarage,
    FacilityEnum.ParkingOutdoor,
    FacilityEnum.MeetingArea,
    FacilityEnum.ServesBreakfastAlwaysIncluded,
    FacilityEnum.LateCheckOutUntil1400Guaranteed,
  ]

  const filteredAmenities = amenities.filter(
    (amenity) => !amenitiesToIgnore.includes(amenity.id)
  )

  return filteredAmenities?.map((amenity) => (
    <Typography key={amenity.name} variant="Title/Subtitle/md">
      <li className={styles.wrapper}>
        <div className={styles.amenity}>
          <FacilityToIcon
            id={amenity.id}
            color="Icon/Interactive/Default"
            size={24}
          />
          <span className={styles.amenityName}>{amenity.name}</span>
        </div>
      </li>
    </Typography>
  ))
}