web/components/GuestsRoomsPicker/GuestsRoom/index.tsx

import { useIntl } from "react-intl"

import { DeleteIcon } from "@/components/Icons"
import Button from "@/components/TempDesignSystem/Button"
import Divider from "@/components/TempDesignSystem/Divider"
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"

import AdultSelector from "../AdultSelector"
import ChildSelector from "../ChildSelector"

import styles from "../guests-rooms-picker.module.css"

import { ChildBedMapEnum } from "@/types/components/bookingWidget/enums"
import type { TGuestsRoom } from "@/types/components/bookingWidget/guestsRoomsPicker"

export function GuestsRoom({
  room,
  index,
  onRemove,
}: {
  room: TGuestsRoom
  index: number
  onRemove: (index: number) => void
}) {
  const intl = useIntl()
  const roomLabel = intl.formatMessage({ id: "Room" })

  const childrenInAdultsBed = room.child.filter(
    (child) => child.bed === ChildBedMapEnum.IN_ADULTS_BED
  ).length

  return (
    <div className={styles.roomContainer}>
      <section className={styles.roomDetailsContainer}>
        <Subtitle type="two" className={styles.roomHeading}>
          {roomLabel} {index + 1}
        </Subtitle>
        <AdultSelector
          roomIndex={index}
          currentAdults={room.adults}
          currentChildren={room.child}
          childrenInAdultsBed={childrenInAdultsBed}
        />
        <ChildSelector
          roomIndex={index}
          currentAdults={room.adults}
          currentChildren={room.child}
          childrenInAdultsBed={childrenInAdultsBed}
        />
        {index !== 0 && (
          <div className={styles.roomActions}>
            <Button
              intent="text"
              variant="icon"
              wrapping
              theme="secondaryLight"
              onPress={() => onRemove(index)}
              size="small"
              className={styles.roomActionsButton}
            >
              <DeleteIcon color="red" />
              <span className={styles.roomActionsLabel}>
                {intl.formatMessage({ id: "Remove room" })}
              </span>
            </Button>
          </div>
        )}
      </section>
      <Divider color="primaryLightSubtle" />
    </div>
  )
}