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

import ParkingInformation from "@/components/ParkingInformation"
import Divider from "@/components/TempDesignSystem/Divider"
import { getIntl } from "@/i18n"

import HeroHeader from "../HeroHeader"
import HtmlContent from "../HtmlContent"
import ParkingSidebar from "../Sidebar/ParkingSidebar"

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

import type { AdditionalData, Hotel } from "@/types/hotel"

interface ParkingSubpageProps {
  hotel: Hotel
  additionalData: AdditionalData
}

export default async function ParkingSubpage({
  hotel,
  additionalData,
}: ParkingSubpageProps) {
  const intl = await getIntl()
  const heading = intl.formatMessage({
    defaultMessage: "Parking",
  })
  const { mainBody, elevatorPitch } = additionalData.hotelParking
  const heroImage = additionalData.parkingImages?.heroImages[0]

  return (
    <>
      <section className={styles.parkingSubpage}>
        <HeroHeader breadcrumbsTitle={heading} heroImage={heroImage} />

        <div className={styles.contentContainer}>
          <Typography variant="Title/md">
            <h1 className={styles.heading}>{heading}</h1>
          </Typography>

          <aside className={styles.sidebar}>
            <ParkingSidebar
              address={hotel.address}
              contactInformation={hotel.contactInformation}
            />
          </aside>
          <Divider color="baseSurfaceSubtleHover" className={styles.divider} />
          <main className={styles.mainContent}>
            {elevatorPitch ? (
              <div className={styles.intro}>
                <Typography variant="Body/Lead text">
                  <p>{elevatorPitch}</p>
                </Typography>
              </div>
            ) : null}

            {mainBody ? <HtmlContent html={mainBody} /> : null}

            <div className={styles.parkingInformation}>
              {hotel.parking.map((data) => (
                <ParkingInformation
                  key={data.type}
                  parking={data}
                  showExternalParkingButton={false}
                />
              ))}
            </div>
          </main>
        </div>
      </section>
    </>
  )
}
