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

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 styles from "./hotelSelectionHeader.module.css"

import { HotelSelectionHeaderProps } from "@/types/components/hotelReservation/selectRate/hotelSelectionHeader"

export default function HotelSelectionHeader({
  hotel,
}: HotelSelectionHeaderProps) {
  const intl = useIntl()

  return (
    <header className={styles.hotelSelectionHeader}>
      <div className={styles.hotelSelectionHeaderWrapper}>
        <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 }
              )}
            </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>
  )
}
