"use client"

import { useParams } from "next/navigation"
import { useState } from "react"

import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"

import ListingHotelCardDialog from "./ListingHotelCardDialog"
import StandaloneHotelCardDialog from "./StandaloneHotelCardDialog"

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

import type { HotelCardDialogProps } from "@/types/components/hotelReservation/selectHotel/map"
import type { Lang } from "@/constants/languages"

export default function HotelCardDialog({
  data,
  isOpen,
  type = "standalone",
  handleClose,
}: HotelCardDialogProps) {
  const params = useParams()
  const lang = params.lang as Lang
  const [imageError, setImageError] = useState(false)

  if (!data) {
    return null
  }

  return (
    <dialog open={isOpen} className={styles.dialog}>
      <div className={styles.dialogContainer} data-type={type}>
        <div onClick={handleClose}>
          <MaterialIcon icon="close" className={styles.closeIcon} size={22} />
        </div>

        {type === "standalone" ? (
          <StandaloneHotelCardDialog
            data={data}
            lang={lang}
            imageError={imageError}
            setImageError={setImageError}
          />
        ) : (
          <ListingHotelCardDialog
            data={data}
            lang={lang}
            imageError={imageError}
            setImageError={setImageError}
          />
        )}
      </div>
    </dialog>
  )
}