import { redirect } from "next/navigation"

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

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

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

import type { LangParams, PageArgs } from "@/types/params"

export default async function HotelHeader({
  params,
  searchParams,
}: PageArgs<LangParams, { hotel: string }>) {
  const home = `/${params.lang}`
  if (!searchParams.hotel) {
    redirect(home)
  }
  const hotelData = await getHotelData({
    hotelId: searchParams.hotel,
    language: params.lang,
  })
  if (!hotelData?.data) {
    redirect(home)
  }

  const intl = await getIntl()
  const hotel = hotelData.data.attributes
  return (
    <header className={styles.header}>
      <div className={styles.wrapper}>
        <div className={styles.titleContainer}>
          <Title as="h3" level="h1">
            {hotel.name}
          </Title>
          <address className={styles.address}>
            <Caption color="textMediumContrast">
              {hotel.address.streetAddress}, {hotel.address.city}
            </Caption>
            <div>
              <Divider variant="vertical" color="subtle" />
            </div>
            <Caption color="textMediumContrast">
              {intl.formatMessage(
                { id: "Distance in km to city centre" },
                { number: hotel.location.distanceToCentre / 1000 }
              )}
            </Caption>
          </address>
        </div>
        <div className={styles.dividerContainer}>
          <Divider variant="vertical" color="subtle" />
        </div>
        <div className={styles.descriptionContainer}>
          <Body color="baseTextHighContrast">
            {hotel.hotelContent.texts.descriptions.short}
          </Body>
        </div>
      </div>
    </header>
  )
}
