"use client"

import Script from "next/script"
import { useState } from "react"

import useLang from "@/hooks/useLang"

import MeetingPackageWidgetSkeleton from "./Skeleton"
import { meetingPackageDestinationByHotelId } from "./utils"

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

const SOURCE = "https://bookingengine-mp.s3.eu-west-2.amazonaws.com/script.js"

interface MeetingPackageWidgetProps {
  hotelId?: string
  className?: string
}

export default function MeetingPackageWidget({
  hotelId,
  className = "",
}: MeetingPackageWidgetProps) {
  const lang = useLang()
  const [isLoading, setIsLoading] = useState(true)
  const destination = hotelId
    ? meetingPackageDestinationByHotelId[hotelId]
    : undefined

  function handleOnReady() {
    setIsLoading(false)
  }

  return (
    <div className={className}>
      {isLoading && <MeetingPackageWidgetSkeleton />}

      <div
        id="mp-booking-engine-iframe-container"
        className={`${styles.widget} ${!isLoading ? styles.ready : ""}`}
      />
      <Script
        //@ts-expect-error: invalid attributes because of external script
        langcode={lang}
        destination={destination}
        whitelabel_id="224905"
        widget_id="scandic_default_new"
        version="frontpage-scandic"
        src={SOURCE}
        onReady={handleOnReady}
      />
    </div>
  )
}