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 { TrackingSDK } from "@scandic-hotels/tracking/TrackingSDK"

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()

  const trackingData = {
    pageName: "startpage",
    pageType: "startpage",
    channel: "homepage",
    domainLanguage: lang,
    siteSections: "startpage",
    siteVersion: "new-web",
  } as const

  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>
      <TrackingSDK pageData={trackingData} />
    </>
  )
}
