"use client"

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

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

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

export default function Packages() {
  const packages = useMyStayStore(
    (state) =>
      state.bookedRoom.packages?.filter((item) =>
        Object.values(RoomPackageCodeEnum).includes(
          item.code as RoomPackageCodeEnum
        )
      ) || []
  )

  if (!packages.length) {
    return null
  }

  return (
    <div className={styles.packages}>
      {packages.map((item) => (
        <span className={styles.package} key={item.code}>
          <IconForFeatureCode
            featureCode={item.code}
            size={16}
            color="Icon/Interactive/Default"
          />
        </span>
      ))}
    </div>
  )
}