import { cx } from "class-variance-authority"

import MeetingPackageWidgetSkeleton from "../Skeleton"
import { useMeetingPackageWidget } from "../useMeetingPackageWidget"

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

import type { MeetingPackageWidgetProps } from ".."

export default function MeetingPackageWidgetContent({
  destination,
  className,
}: MeetingPackageWidgetProps) {
  const { isLoading } = useMeetingPackageWidget(destination)

  return (
    <div className={className}>
      {isLoading && <MeetingPackageWidgetSkeleton />}
      <div
        id="mp-booking-engine-iframe-container"
        className={cx(styles.widget, { [styles.isLoading]: isLoading })}
      />
    </div>
  )
}