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

import { getBedIconName } from "@/components/SidePeeks/RoomSidePeek/bedIcon"
import { getIntl } from "@/i18n"

import { getBedDescriptionText } from "../utils"
import getFilteredRoomTypes from "./utils"

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

import type { Room } from "@/types/hotel"

interface RoomFacilitiesProps {
  roomTypes: Room["roomTypes"]
}

export default async function RoomTypes({ roomTypes }: RoomFacilitiesProps) {
  const intl = await getIntl()

  const filteredRoomTypes = getFilteredRoomTypes(roomTypes)

  return (
    <>
      <div className={styles.intro}>
        <Typography variant="Title/Subtitle/md">
          <h3>
            {intl.formatMessage({
              defaultMessage: "Bed options",
            })}
          </h3>
        </Typography>
        <Typography variant="Body/Paragraph/mdRegular">
          <p>
            {intl.formatMessage({
              defaultMessage: "Based on availability",
            })}
          </p>
        </Typography>
      </div>
      <ul className={styles.list}>
        {filteredRoomTypes.map((roomType) => {
          const iconName = getBedIconName(roomType.mainBed.type)
          const descriptionText = getBedDescriptionText(intl, roomType.mainBed)

          return (
            <li key={roomType.code} className={styles.listItem}>
              <MaterialIcon
                color="CurrentColor"
                icon={iconName}
                className={styles.icon}
              />
              <Typography variant="Body/Paragraph/mdRegular">
                <span>{descriptionText}</span>
              </Typography>
            </li>
          )
        })}
      </ul>
    </>
  )
}
