import { dt } from "@/lib/dt"
import { getBookingConfirmation } from "@/lib/trpc/memoizedRequests"

import Body from "@/components/TempDesignSystem/Text/Body"
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
import { getIntl } from "@/i18n"
import { getLang } from "@/i18n/serverContext"

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

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

export default async function Details({
  confirmationNumber,
}: BookingConfirmationProps) {
  const intl = await getIntl()
  const lang = getLang()
  const { booking } = await getBookingConfirmation(confirmationNumber)

  const fromDate = dt(booking.checkInDate).locale(lang)
  const toDate = dt(booking.checkOutDate).locale(lang)

  return (
    <article className={styles.details}>
      <header>
        <Subtitle color="burgundy" type="two">
          {intl.formatMessage(
            { id: "Reference #{bookingNr}" },
            { bookingNr: booking.confirmationNumber }
          )}
        </Subtitle>
      </header>
      <ul className={styles.list}>
        <li className={styles.listItem}>
          <Body>{intl.formatMessage({ id: "Check-in" })}</Body>
          <Body>
            {`${fromDate.format("ddd, D MMM")} ${intl.formatMessage({ id: "from" })} ${fromDate.format("HH:mm")}`}
          </Body>
        </li>
        <li className={styles.listItem}>
          <Body>{intl.formatMessage({ id: "Check-out" })}</Body>
          <Body>
            {`${toDate.format("ddd, D MMM")} ${intl.formatMessage({ id: "from" })} ${toDate.format("HH:mm")}`}
          </Body>
        </li>
        <li className={styles.listItem}>
          <Body>{intl.formatMessage({ id: "Breakfast" })}</Body>
          <Body>N/A</Body>
        </li>
        <li className={styles.listItem}>
          <Body>{intl.formatMessage({ id: "Cancellation policy" })}</Body>
          <Body>N/A</Body>
        </li>
        <li className={styles.listItem}>
          <Body>{intl.formatMessage({ id: "Rebooking" })}</Body>
          <Body>N/A</Body>
        </li>
      </ul>
    </article>
  )
}
