import { useIntl } from "react-intl"

import { useMyStayStore } from "@/stores/my-stay"

import Row from "./Row"

import { RoomPackageCodeEnum } from "@/types/components/hotelReservation/selectRate/roomFilter"

export default function Packages() {
  const intl = useIntl()

  const packages = useMyStayStore(
    (state) =>
      state.bookedRoom.packages
        ?.filter((item) =>
          Object.values(RoomPackageCodeEnum).includes(
            item.code as RoomPackageCodeEnum
          )
        )
        .map((item) => item.description) || []
  )

  if (!packages.length) {
    return null
  }

  return (
    <Row
      icon="meeting_room"
      text={packages.join(", ")}
      title={intl.formatMessage({
        defaultMessage: "Room classification",
      })}
    />
  )
}