"use client"

import { useIntl } from "react-intl"

import useHotelPageStore from "@/stores/hotel-page"

import PoiMarker from "@/components/Maps/Markers/Poi"
import Button from "@/components/TempDesignSystem/Button"
import Body from "@/components/TempDesignSystem/Text/Body"
import Caption from "@/components/TempDesignSystem/Text/Caption"
import Title from "@/components/TempDesignSystem/Text/Title"

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

import type { MapCardProps } from "@/types/components/hotelPage/map/mapCard"

export default function MapCard({ hotelName, pois }: MapCardProps) {
  const intl = useIntl()
  const { openDynamicMap } = useHotelPageStore()

  return (
    <div className={styles.mapCard}>
      <Caption
        color="textMediumContrast"
        textTransform="uppercase"
        textAlign="center"
      >
        {intl.formatMessage({ id: "Nearby" })}
      </Caption>
      <Title
        color="burgundy"
        level="h3"
        as="h4"
        textAlign="center"
        textTransform="capitalize"
      >
        {hotelName}
      </Title>
      <ul className={styles.poiList}>
        {pois.map((poi) => (
          <li key={poi.name} className={styles.poiItem}>
            <PoiMarker
              group={poi.group}
              categoryName={poi.categoryName}
              skipBackground
              size={20}
            />
            <Body color="black">{poi.name}</Body>
            <Caption>{poi.distance} km</Caption>
          </li>
        ))}
      </ul>

      <Button
        theme="base"
        intent="secondary"
        size="small"
        fullWidth
        onClick={openDynamicMap}
      >
        {intl.formatMessage({ id: "Explore nearby" })}
      </Button>
    </div>
  )
}
