"use client"

import { useSearchParams } from "next/navigation"
import { useIntl } from "react-intl"

import {
  alternativeHotelsMap,
  selectHotelMap,
} from "@scandic-hotels/common/constants/routes/hotelReservation"
import ButtonLink from "@scandic-hotels/design-system/ButtonLink"

import useLang from "../../../hooks/useLang"
import FilterAndSortModal from "../Filters/FilterAndSortModal"

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

import type { CategorizedHotelFilters } from "../../../types"

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

  const url = isAlternative ? alternativeHotelsMap(lang) : selectHotelMap(lang)
  const search = searchParams.toString()
  const href = search ? `${url}?${search}` : url

  return (
    <div className={styles.buttonContainer}>
      <ButtonLink
        variant="Secondary"
        href={href}
        size="sm"
        leadingIconName="map"
      >
        {intl.formatMessage({
          id: "destination.seeOnMap",
          defaultMessage: "See on map",
        })}
      </ButtonLink>
      <FilterAndSortModal filters={filters} />
    </div>
  )
}