"use client"
import { useIntl } from "react-intl"

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

import { useDestinationDataStore } from "@/stores/destination-data"

import Map from "../../Map"
import { getHeadingText } from "../../utils"
import HotelList from "./HotelList"

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

import type { MapLocation } from "@/types/components/mapLocation"
import type { CityLocation } from "@/types/trpc/routers/hotel/locations"

interface CityMapProps {
  mapId: string
  apiKey: string
  city: CityLocation
  defaultLocation: MapLocation
}

export default function CityMap({
  mapId,
  apiKey,
  city,
  defaultLocation,
}: CityMapProps) {
  const intl = useIntl()
  const { activeHotels, allFilters, activeFilters } = useDestinationDataStore(
    (state) => ({
      activeHotels: state.activeHotels,
      allFilters: state.allFilters,
      activeFilters: state.activeFilters,
    })
  )

  return (
    <Map
      hotels={activeHotels}
      mapId={mapId}
      apiKey={apiKey}
      pageType="city"
      defaultLocation={defaultLocation}
    >
      <Typography variant="Title/sm">
        <h1 className={styles.title}>
          {getHeadingText(intl, city.name, allFilters, activeFilters[0])}
        </h1>
      </Typography>
      <HotelList />
    </Map>
  )
}
