"use client"
import { APIProvider } from "@vis.gl/react-google-maps"

import { type HotelResponse } from "../helpers"
import { SelectHotelMapContent } from "./SelectHotelMapContent"

import type { CategorizedHotelFilters } from "../../../types"

export { SelectHotelMapSkeleton } from "./SelectHotelMapSkeleton"

interface Coordinates {
  lat: number
  lng: number
}

interface SelectHotelMapProps {
  apiKey: string
  mapId: string
  hotels: HotelResponse[]
  cityCoordinates: Coordinates
  bookingCode: string | undefined
  isBookingCodeRateAvailable?: boolean
  isAlternativeHotels?: boolean
  filterList: CategorizedHotelFilters
}

export function SelectHotelMap({
  apiKey,
  mapId,
  hotels,
  cityCoordinates,
  bookingCode,
  isBookingCodeRateAvailable,
  isAlternativeHotels,
  filterList,
}: SelectHotelMapProps) {
  return (
    <APIProvider apiKey={apiKey}>
      <SelectHotelMapContent
        cityCoordinates={cityCoordinates}
        mapId={mapId}
        hotels={hotels}
        bookingCode={bookingCode}
        isBookingCodeRateAvailable={isBookingCodeRateAvailable}
        isAlternativeHotels={isAlternativeHotels}
        filterList={filterList}
      />
    </APIProvider>
  )
}