import EnterDetailsProvider from "@/components/HotelReservation/EnterDetails/Provider"
import SelectedRoom from "@/components/HotelReservation/EnterDetails/SelectedRoom"
import Summary from "@/components/HotelReservation/EnterDetails/Summary"
import { setLang } from "@/i18n/serverContext"

import { preload } from "./page"

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

import { StepEnum } from "@/types/components/hotelReservation/enterDetails/step"
import type { LangParams, LayoutArgs } from "@/types/params"

export default async function StepLayout({
  children,
  hotelHeader,
  params,
  sidePeek,
}: React.PropsWithChildren<
  LayoutArgs<LangParams & { step: StepEnum }> & {
    hotelHeader: React.ReactNode
    sidePeek: React.ReactNode
  }>) {
  setLang(params.lang)
  preload()
  return (
    <EnterDetailsProvider step={params.step} >
      <main className={styles.layout}>
        {hotelHeader}
        <div className={styles.content}>
          <SelectedRoom />
          {children}
          <aside className={styles.summary}>
            <Summary isMember={false} />
          </aside>
        </div>
        {sidePeek}
      </main>
    </EnterDetailsProvider>
  )
}
