"use client"

import { useIntl } from "react-intl"

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

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

import type { BookingConfirmation } from "@scandic-hotels/trpc/types/bookingConfirmation"

export function HotelDetails({
  hotel,
  url,
}: {
  hotel: BookingConfirmation["hotel"]
  url: string | null
}) {
  const intl = useIntl()

  return (
    <div className={styles.container}>
      <div className={styles.details}>
        <Typography variant="Title/Subtitle/md">
          <h3>
            {intl.formatMessage({
              id: "bookingConfirmation.hotelDetails",
              defaultMessage: "Hotel details",
            })}
          </h3>
        </Typography>
        <Typography variant="Body/Paragraph/mdRegular">
          <div className={styles.hotel}>
            <p>{hotel.name}</p>
            <p>
              {intl.formatMessage(
                {
                  id: "bookingConfirmation.hotel.address",
                  defaultMessage: "{streetAddress}, {zipCode} {city}",
                },
                {
                  streetAddress: hotel.address.streetAddress,
                  zipCode: hotel.address.zipCode,
                  city: hotel.address.city,
                }
              )}
            </p>
            <p>
              <Link
                className={styles.link}
                href={`tel:${hotel.contactInformation.phoneNumber}`}
              >
                {hotel.contactInformation.phoneNumber}
              </Link>
            </p>
          </div>
        </Typography>
      </div>
      <div className={styles.contact}>
        <Link
          className={styles.link}
          color="Text/Interactive/Secondary"
          href={`mailto:${hotel.contactInformation.email}`}
          textDecoration="underline"
        >
          {hotel.contactInformation.email}
        </Link>
        {url && (
          <Link
            className={styles.link}
            color="Text/Interactive/Secondary"
            href={url}
            textDecoration="underline"
          >
            {url}
          </Link>
        )}
      </div>
    </div>
  )
}