web/packages/booking-flow/lib/components/BookingWidget/GuestsRoomsPicker/GuestsRoom/index.tsx

import { useIntl } from "react-intl"

import { Divider } from "@scandic-hotels/design-system/Divider"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
import Subtitle from "@scandic-hotels/design-system/Subtitle"
import { ChildBedMapEnum } from "@scandic-hotels/trpc/enums/childBedMapEnum"

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

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

import type { GuestsRoom } from "../.."

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

  const childrenInAdultsBed = room.childrenInRoom.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}
        </Subtitle>
        <AdultSelector roomIndex={index} currentAdults={room.adults} />
        <ChildSelector
          roomIndex={index}
          currentAdults={room.adults}
          currentChildren={room.childrenInRoom}
          childrenInAdultsBed={childrenInAdultsBed}
        />
        {index !== 0 && (
          <Button
            intent="text"
            variant="icon"
            wrapping
            theme="secondaryLight"
            onPress={() => onRemove(index)}
            size="small"
            className={styles.roomActionsButton}
          >
            <MaterialIcon icon="delete" color="CurrentColor" />
            {intl.formatMessage({
              defaultMessage: "Remove room",
            })}
          </Button>
        )}
      </section>
      <Divider color="Border/Divider/Subtle" />
    </div>
  )
}