import { useIntl } from "react-intl"

import { getRoomFeatureDescription } from "@scandic-hotels/booking-flow/utils/getRoomFeatureDescription"
import { RoomPackageCodeEnum } from "@scandic-hotels/trpc/enums/roomFilter"

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

import Row from "./Row"

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) =>
          getRoomFeatureDescription(item.code, item.description, intl)
        ) || []
  )

  if (!packages.length) {
    return null
  }

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