"use client"

import { useIntl } from "react-intl"

import { Typography } from "@scandic-hotels/design-system/Typography"

import { useHotelResultCountStore } from "../../../stores/hotel-result-count"

export default function HotelCount() {
  const intl = useIntl()
  const resultCount = useHotelResultCountStore((state) => state.resultCount)

  return (
    <Typography variant="Title/Subtitle/md">
      <span>
        {intl.formatMessage(
          {
            id: "common.numberOfHotels",
            defaultMessage: "{amount, plural, one {# hotel} other {# hotels}}",
          },
          { amount: resultCount }
        )}
      </span>
    </Typography>
  )
}