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

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

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

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

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

interface WellnessSubpageProps {
  hotel: Hotel
  healthAndFitness: AdditionalData["healthAndFitness"]
}

export default async function WellnessSubpage({
  hotel,
  healthAndFitness,
}: WellnessSubpageProps) {
  const intl = await getIntl()
  const heading = intl.formatMessage({
    defaultMessage: "Gym & Wellness",
  })
  const { mainBody, elevatorPitch } = healthAndFitness
  const heroImage = hotel.healthFacilities.find(
    (fac) => fac.content.images.length
  )?.content.images[0]

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

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

          <aside className={styles.sidebar}>
            <WellnessSidebar
              address={hotel.address}
              contactInformation={hotel.contactInformation}
              healthFacilities={hotel.healthFacilities}
            />
          </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}
          </main>
        </div>
      </section>
    </>
  )
}
