"use client"

import { useIntl } from "react-intl"

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

import { getBedIcon } from "../RoomSidePeek/bedIcon"
import { getFacilityIcon } from "../RoomSidePeek/facilityIcon"

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

import type { RoomDetailsProps } from "@/types/components/sidePeeks/bookedRoomSidePeek"

export default function RoomDetails({
  roomDescription,
  roomFacilities,
  roomTypes,
}: RoomDetailsProps) {
  const intl = useIntl()

  const sortedFacilities = roomFacilities
    .sort((a, b) => a.sortOrder - b.sortOrder)
    .map((facility) => {
      const Icon = getFacilityIcon(facility.icon)
      return { ...facility, Icon }
    })

  const bedOptions = roomTypes.map((roomType) => {
    const BedIcon = getBedIcon(roomType.mainBed.type)
    return { ...roomType, BedIcon }
  })

  return (
    <div className={styles.descriptionContainer}>
      <Typography variant="Body/Paragraph/mdRegular">
        <p className={styles.text}>{roomDescription}</p>
      </Typography>
      <div className={styles.listContainer}>
        <Typography variant="Title/Subtitle/md">
          <p className={styles.text}>
            {intl.formatMessage({ id: "This room is equipped with" })}
          </p>
        </Typography>
        <ul className={styles.facilityList}>
          {sortedFacilities.map(({ name, Icon }) => (
            <li key={name}>
              {Icon && (
                <Icon width={24} height={24} color="uiTextMediumContrast" />
              )}
              <Typography variant="Body/Paragraph/mdRegular">
                <span className={styles.listText}>{name}</span>
              </Typography>
            </li>
          ))}
        </ul>
      </div>
      <div className={styles.listContainer}>
        <Typography variant="Title/Subtitle/md">
          <p className={styles.text}>
            {intl.formatMessage({ id: "Bed options" })}
          </p>
        </Typography>
        <Typography variant="Body/Paragraph/mdRegular">
          <p className={styles.text}>
            {intl.formatMessage({ id: "Based on availability" })}
          </p>
        </Typography>
        <ul className={styles.bedOptions}>
          {bedOptions.map(({ code, mainBed, BedIcon }) => (
            <li key={code}>
              {BedIcon && (
                <BedIcon color="uiTextMediumContrast" width={24} height={24} />
              )}
              <Typography variant="Body/Paragraph/mdRegular">
                <span className={styles.listText}>{mainBed.description}</span>
              </Typography>
            </li>
          ))}
        </ul>
      </div>
    </div>
  )
}