"use client"

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

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

import type { BookingWidgetClientProps } from "./Client"

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

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