"use client"

import { useIntl } from "react-intl"

import Preamble from "@scandic-hotels/design-system/Preamble"

import { useHotelFilterStore } from "@/stores/hotel-filters"

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

  return (
    <Preamble>
      {intl.formatMessage(
        {
          defaultMessage: "{amount, plural, one {# hotel} other {# hotels}}",
        },
        { amount: resultCount }
      )}
    </Preamble>
  )
}