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

import Link from "@/components/TempDesignSystem/Link"
import Body from "@/components/TempDesignSystem/Text/Body"
import Title from "@/components/TempDesignSystem/Text/Title"
import { getIntl } from "@/i18n"

import Actions from "./Actions"

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

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

export default async function Header({
  confirmationNumber,
}: BookingConfirmationProps) {
  const intl = await getIntl()
  const { hotel } = await getBookingConfirmation(confirmationNumber)

  const text = intl.formatMessage<React.ReactNode>(
    { id: "booking.confirmation.text" },
    {
      emailLink: (str) => (
        <Link color="burgundy" href="#" textDecoration="underline">
          {str}
        </Link>
      ),
    }
  )

  return (
    <header className={styles.header}>
      <hgroup className={styles.hgroup}>
        <Title as="h2" color="red" textTransform="uppercase" type="h2">
          {intl.formatMessage({ id: "booking.confirmation.title" })}
        </Title>
        <Title as="h2" color="burgundy" textTransform="uppercase" type="h1">
          {hotel.name}
        </Title>
      </hgroup>
      <Body className={styles.body}>{text}</Body>
      <Actions />
    </header>
  )
}
