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

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

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}>
        <BiroScript color="red" tilted="small" type="two">
          {intl.formatMessage({ id: "See you soon!" })}
        </BiroScript>
        <Title
          as="h4"
          color="red"
          textAlign="center"
          textTransform="regular"
          type="h2"
        >
          {intl.formatMessage({ id: "booking.confirmation.title" })}
        </Title>
        <Title
          as="h4"
          color="burgundy"
          textAlign="center"
          textTransform="regular"
          type="h1"
        >
          {hotel.name}
        </Title>
      </hgroup>
      <Body className={styles.body} textAlign="center">
        {text}
      </Body>
    </header>
  )
}
