web/apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AllAncillariesModal/SelectAncillaryStep/index.tsx

import { useIntl } from "react-intl"

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

import { useAddAncillaryStore } from "@/stores/my-stay/add-ancillary-flow"

import WrappedAncillaryCard from "../../Card"

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

export default function SelectAncillaryStep({
  onClose,
}: {
  onClose: () => void
}) {
  const {
    ancillariesBySelectedCategory,
    selectedCategory,
    categories,
    selectCategory,
  } = useAddAncillaryStore((state) => ({
    categories: state.categories,
    selectedCategory: state.selectedCategory,
    ancillariesBySelectedCategory: state.ancillariesBySelectedCategory,
    selectCategory: state.selectCategory,
  }))
  const intl = useIntl()

  return (
    <div className={styles.container}>
      <div className={styles.tabs}>
        {categories.map((categoryName) => (
          <button
            key={categoryName}
            className={`${styles.chip} ${categoryName === selectedCategory ? styles.selected : ""}`}
            onClick={() => selectCategory(categoryName)}
          >
            <Typography variant="Body/Supporting text (caption)/smRegular">
              <p>
                {categoryName
                  ? categoryName
                  : intl.formatMessage({
                      id: "common.other",
                      defaultMessage: "Other",
                    })}
              </p>
            </Typography>
          </button>
        ))}
      </div>

      <div className={styles.grid}>
        {ancillariesBySelectedCategory.map((ancillary) => (
          <WrappedAncillaryCard
            key={ancillary.id}
            ancillary={ancillary}
            onClose={onClose}
          />
        ))}
      </div>
    </div>
  )
}