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

import Link from "@/components/TempDesignSystem/Link"
import { getIntl } from "@/i18n"

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

import { Country } from "@/types/enums/country"
import type { Hotel } from "@/types/hotel"

interface HotelSidebarProps {
  address: Hotel["address"]
  contactInformation: Hotel["contactInformation"]
}

export default async function ParkingSidebar({
  address,
  contactInformation,
}: HotelSidebarProps) {
  const intl = await getIntl()

  return (
    <>
      <div className={styles.content}>
        <Typography variant="Title/xs" className={styles.heading}>
          <h3>
            {intl.formatMessage({
              defaultMessage: "Address",
            })}
          </h3>
        </Typography>

        <Typography variant="Body/Paragraph/mdRegular" className={styles.text}>
          <div>
            <p>{address.streetAddress}</p>
            <p>
              {address.zipCode} {address.city}
            </p>
            <p> {address.country}</p>
          </div>
        </Typography>
      </div>

      <div className={styles.content}>
        <Typography variant="Title/xs" className={styles.heading}>
          <h3>
            {intl.formatMessage({
              defaultMessage: "Contact us",
            })}
          </h3>
        </Typography>
        <div className={styles.contactDetails}>
          <Link href={`tel:${contactInformation.phoneNumber}`}>
            {contactInformation.phoneNumber}
          </Link>
          {address.country === Country.Finland ? (
            <Typography
              variant="Body/Paragraph/mdRegular"
              className={styles.text}
            >
              <p>
                {intl.formatMessage({
                  defaultMessage: "Price 0,16 €/min + local call charges",
                })}
              </p>
            </Typography>
          ) : null}
          <Link
            textDecoration="underline"
            href={`mailto:${contactInformation.email}`}
          >
            {contactInformation.email}
          </Link>
        </div>
      </div>
    </>
  )
}
