"use client"
import { useIntl } from "react-intl"

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

import { HouseIcon, MapIcon } from "@/components/Icons"

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

export default function MobileMapToggle() {
  const intl = useIntl()
  const { isDynamicMapOpen, openDynamicMap, closeDynamicMap } =
    useHotelPageStore()

  return (
    <div className={styles.mobileToggle}>
      <button
        type="button"
        className={`${styles.button} ${!isDynamicMapOpen ? styles.active : ""}`}
        onClick={closeDynamicMap}
      >
        <HouseIcon
          color={!isDynamicMapOpen ? "white" : "red"}
          height={24}
          width={24}
        />
        <span>{intl.formatMessage({ id: "Hotel" })}</span>
      </button>
      <button
        type="button"
        className={`${styles.button} ${isDynamicMapOpen ? styles.active : ""}`}
        onClick={openDynamicMap}
      >
        <MapIcon
          color={isDynamicMapOpen ? "white" : "red"}
          height={24}
          width={24}
        />
        <span>{intl.formatMessage({ id: "Map" })}</span>
      </button>
    </div>
  )
}
