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

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

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

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

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

interface RestaurantSubpageProps {
  restaurant: Restaurant
  hotelAddress: Hotel["address"]
}

export default async function RestaurantSubpage({
  restaurant,
  hotelAddress,
}: RestaurantSubpageProps) {
  const intl = await getIntl()
  const { mainBody, elevatorPitch, name, bookTableUrl } = restaurant
  const heroImage = restaurant.content.images[0]

  return (
    <>
      <section className={styles.restaurantSubpage}>
        <HeroHeader breadcrumbsTitle={name} heroImage={heroImage} />

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

          <aside className={styles.sidebar}>
            <RestaurantSidebar
              restaurant={restaurant}
              hotelAddress={hotelAddress}
            />
          </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>
        {bookTableUrl ? (
          <div className={styles.buttonContainer}>
            <ButtonLink
              href={bookTableUrl}
              variant="Primary"
              typography="Body/Paragraph/mdBold"
            >
              {intl.formatMessage({
                defaultMessage: "Book a table",
              })}
            </ButtonLink>
          </div>
        ) : null}
      </section>
    </>
  )
}
