import { Typography } from "@scandic-hotels/design-system/Typography"

import { getIntl } from "@/i18n"

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

import type { Hotel } from "@scandic-hotels/trpc/types/hotel"

export async function Header({
  cityName,
  name,
}: Pick<Hotel, "cityName" | "name">) {
  const intl = await getIntl()
  return (
    <header className={styles.header}>
      <Typography variant="Title/Decorative/lg" className={styles.myStayAt}>
        <h2>
          {intl.formatMessage({
            id: "myStay.header.myStayAt",
            defaultMessage: "My stay at",
          })}
        </h2>
      </Typography>
      <Typography variant="Title/lg">
        <h2 className={styles.hotelName}>{name}</h2>
      </Typography>
      <Typography variant="Title/md">
        <h3>{cityName}</h3>
      </Typography>
    </header>
  )
}