"use client"

import { useIntl } from "react-intl"

import Body from "@scandic-hotels/design-system/Body"
import Link from "@scandic-hotels/design-system/Link"
import Subtitle from "@scandic-hotels/design-system/Subtitle"

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

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

export default function HotelDetails({
  hotel,
}: BookingConfirmationHotelDetailsProps) {
  const intl = useIntl()
  return (
    <div className={styles.container}>
      <div className={styles.details}>
        <Subtitle color="uiTextHighContrast" type="two">
          {intl.formatMessage({
            defaultMessage: "Hotel details",
          })}
        </Subtitle>
        <div className={styles.hotel}>
          <Body color="uiTextHighContrast">{hotel.name}</Body>
          <Body color="uiTextHighContrast">
            {intl.formatMessage(
              {
                defaultMessage: "{streetAddress}, {zipCode} {city}",
              },
              {
                streetAddress: hotel.address.streetAddress,
                zipCode: hotel.address.zipCode,
                city: hotel.address.city,
              }
            )}
          </Body>
          <Body asChild color="uiTextHighContrast">
            <Link
              className={styles.link}
              href={`tel:${hotel.contactInformation.phoneNumber}`}
            >
              {hotel.contactInformation.phoneNumber}
            </Link>
          </Body>
        </div>
      </div>
      <div className={styles.contact}>
        <Link
          className={styles.link}
          color="Text/Interactive/Secondary"
          href={`mailto:${hotel.contactInformation.email}`}
        >
          {hotel.contactInformation.email}
        </Link>
        <Link
          className={styles.link}
          color="Text/Interactive/Secondary"
          href={hotel.contactInformation.websiteUrl}
        >
          {hotel.contactInformation.websiteUrl}
        </Link>
      </div>
    </div>
  )
}
