"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 CityList from "./CityList"

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

import type { MapLocation } from "@/types/components/mapLocation"

interface CountryMapProps {
  mapId: string
  apiKey: string
  country: string
  defaultLocation: MapLocation
}

export default function CountryMap({
  mapId,
  apiKey,
  country,
  defaultLocation,
}: CountryMapProps) {
  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="country"
      defaultLocation={defaultLocation}
    >
      <Typography variant="Title/sm">
        <h1 className={styles.title}>
          {getHeadingText(intl, country, allFilters, activeFilters[0])}
        </h1>
      </Typography>
      <CityList />
    </Map>
  )
}
