"use client"

import { BookingFlowConfigContextProvider } from "../../bookingFlowConfig/bookingFlowConfigContext"
import { BookingWidgetFormSkeleton } from "./BookingWidgetForm"
import { MobileToggleButtonSkeleton } from "./MobileToggleButton"
import { bookingWidgetContainerVariants } from "./variant"

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

import type { BookingFlowConfig } from "../../bookingFlowConfig/bookingFlowConfig"
import type { BookingWidgetClientProps } from "./Client"

export function BookingWidgetSkeleton({
  type = "full",
  config,
}: {
  type?: BookingWidgetClientProps["type"]
  config: BookingFlowConfig
}) {
  const classNames = bookingWidgetContainerVariants({
    type,
  })

  return (
    <BookingFlowConfigContextProvider config={config}>
      <section className={classNames} style={{ top: 0 }}>
        <MobileToggleButtonSkeleton />
        <div className={styles.formContainer}>
          <BookingWidgetFormSkeleton type={type} />
        </div>
      </section>
    </BookingFlowConfigContextProvider>
  )
}