"use client "
import { useIntl } from "react-intl"

import { dt } from "@/lib/dt"

import Body from "@/components/TempDesignSystem/Text/Body"
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
import useLang from "@/hooks/useLang"

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

import type { LinkedReservationSchema } from "@/types/components/hotelReservation/bookingConfirmation/rooms"

interface LinkedReservationProps {
  linkedReservation: LinkedReservationSchema
  roomIndex: number
}

export function LinkedReservation({
  linkedReservation,
  roomIndex,
}: LinkedReservationProps) {
  const intl = useIntl()
  const lang = useLang()
  const {
    checkinDate,
    checkoutDate,
    confirmationNumber,
    roomTypeCode,
    adults,
    children,
  } = linkedReservation

  const fromDate = dt(checkinDate).locale(lang)
  const toDate = dt(checkoutDate).locale(lang)
  return (
    <div className={styles.reservation}>
      <Subtitle color="uiTextHighContrast" type="two">
        {intl.formatMessage(
          {
            id: "Room {roomIndex}",
          },
          {
            roomIndex: roomIndex + 2,
          }
        )}
      </Subtitle>
      <ul className={styles.details}>
        <li className={styles.listItem}>
          <Body color="uiTextPlaceholder">
            {intl.formatMessage({ id: "Booking number" })}
          </Body>
          <Body color="uiTextHighContrast">{confirmationNumber}</Body>
        </li>
        <li className={styles.listItem}>
          <Body color="uiTextPlaceholder">
            {intl.formatMessage({ id: "Check-in" })}
          </Body>
          <Body color="uiTextHighContrast">
            {intl.formatMessage(
              { id: "{checkInDate} from {checkInTime}" },
              {
                checkInDate: fromDate.format("ddd, D MMM"),
                checkInTime: fromDate.format("HH:mm"),
              }
            )}
          </Body>
        </li>
        <li className={styles.listItem}>
          <Body color="uiTextPlaceholder">
            {intl.formatMessage({ id: "Check-out" })}
          </Body>
          <Body color="uiTextHighContrast">
            {intl.formatMessage(
              { id: "{checkOutDate} from {checkOutTime}" },
              {
                checkOutDate: toDate.format("ddd, D MMM"),
                checkOutTime: toDate.format("HH:mm"),
              }
            )}
          </Body>
        </li>
        <li className={styles.listItem}>
          <Body color="uiTextPlaceholder">
            {intl.formatMessage({ id: "Adults" })}
          </Body>
          <Body color="uiTextHighContrast">{adults}</Body>
        </li>
        <li className={styles.listItem}>
          <Body color="uiTextPlaceholder">
            {intl.formatMessage({ id: "Children" })}
          </Body>
          <Body color="uiTextHighContrast">{children}</Body>
        </li>
      </ul>
    </div>
  )
}
