"use client"

import { useIntl } from "react-intl"

import {
  alternativeHotelsMap,
  selectHotelMap,
} from "@scandic-hotels/common/constants/routes/hotelReservation"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"

import Link from "@/components/TempDesignSystem/Link"
import useLang from "@/hooks/useLang"

import FilterAndSortModal from "../Filters/FilterAndSortModal"

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

import type { CategorizedHotelFilters } from "@/types/components/hotelReservation/selectHotel/hotelFilters"

export default function MobileMapButtonContainer({
  filters,
  isAlternative,
}: {
  filters: CategorizedHotelFilters
  isAlternative?: boolean
}) {
  const intl = useIntl()
  const lang = useLang()

  return (
    <div className={styles.buttonContainer}>
      <Button
        asChild
        theme="base"
        variant="icon"
        intent="secondary"
        size="small"
      >
        <Link
          href={
            isAlternative ? alternativeHotelsMap(lang) : selectHotelMap(lang)
          }
          keepSearchParams
          weight="bold"
        >
          <MaterialIcon icon="map" color="CurrentColor" />
          {intl.formatMessage({
            defaultMessage: "See on map",
          })}
        </Link>
      </Button>
      <FilterAndSortModal filters={filters} />
    </div>
  )
}