import { FloatingBookingWidget } from "@scandic-hotels/booking-flow/BookingWidget/FloatingBookingWidget"
import { parseBookingWidgetSearchParams } from "@scandic-hotels/booking-flow/utils/url"
import Image from "@scandic-hotels/design-system/Image"

import { getLang } from "@/i18n/serverContext"
import LandingPageHeroImage from "@/public/_static/img/landing-page-hero.png"

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

import type { LangParams, PageArgs } from "@/types/params"

export default async function Home(props: PageArgs<LangParams>) {
  const searchParams = await props.searchParams

  const booking = parseBookingWidgetSearchParams(searchParams)

  const lang = await getLang()

  return (
    <section className={styles.mainContent}>
      <div className={styles.bookingWidgetWrapper}>
        <FloatingBookingWidget booking={booking} lang={lang} />
      </div>
      <Image
        alt="Hero Image"
        className={styles.backdrop}
        src={LandingPageHeroImage}
        sizes="100vw"
        quality={80}
        loading="lazy"
      />
    </section>
  )
}