"use client"

import { useIntl } from "react-intl"

import { selectHotelMap } from "@/constants/routes/hotelReservation"

import { FilterIcon, MapIcon } from "@/components/Icons"
import Button from "@/components/TempDesignSystem/Button"
import Link from "@/components/TempDesignSystem/Link"
import useLang from "@/hooks/useLang"

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

export default function MobileMapButtonContainer({ city }: { city: string }) {
  const intl = useIntl()
  const lang = useLang()

  return (
    <div className={styles.buttonContainer}>
      <Button
        asChild
        variant="icon"
        intent="secondary"
        size="small"
        className={styles.button}
      >
        <Link
          href={`${selectHotelMap[lang]}`}
          keepSearchParams
          color="burgundy"
        >
          <MapIcon color="burgundy" />
          {intl.formatMessage({ id: "See on map" })}
        </Link>
      </Button>
      {/* TODO: Add filter toggle */}
      <Button
        variant="icon"
        intent="secondary"
        size="small"
        className={styles.button}
      >
        <FilterIcon color="burgundy" />
        {intl.formatMessage({ id: "Filter and sort" })}
      </Button>
    </div>
  )
}
