web/apps/scandic-web/components/Blocks/DynamicContent/OverviewTable/LargeTable/index.tsx

import { ChevronDown } from "react-feather"

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

import {
  findAvailableRewards,
  getGroupedLabelAndDescription,
  getGroupedRewards,
} from "@/utils/loyaltyTable"

import RewardValue from "../RewardValue"
import DesktopHeader from "./DesktopHeader"

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

import type {
  LargeTableProps,
  RewardTableHeaderProps,
} from "@/types/components/overviewTable"

export default function LargeTable({
  levels,
  activeLevel,
  Select,
}: LargeTableProps) {
  const keyedGroupedRewards = getGroupedRewards(levels)

  return (
    <table className={styles.table}>
      <DesktopHeader
        levels={levels}
        activeLevel={activeLevel}
        Select={Select}
      />
      <tbody className={styles.tbody}>
        {Object.entries(keyedGroupedRewards).map(
          ([key, groupedRewards], idx) => {
            const { label, description } =
              getGroupedLabelAndDescription(groupedRewards)

            return (
              <tr key={key + idx} className={styles.tr}>
                <th scope="row" className={styles.rewardTh}>
                  <RewardTableHeader name={label} description={description} />
                </th>
                {levels.map((level, idx) => {
                  const rewardIdsInGroup = groupedRewards.map(
                    (b) => b.reward_id
                  )
                  const reward = findAvailableRewards(rewardIdsInGroup, level)
                  return (
                    <td
                      key={`${reward?.reward_id}-${idx}`}
                      className={styles.td}
                    >
                      <RewardValue reward={reward} />
                    </td>
                  )
                })}
              </tr>
            )
          }
        )}
      </tbody>
    </table>
  )
}

function RewardTableHeader({ name, description }: RewardTableHeaderProps) {
  return (
    <details className={styles.details}>
      <summary className={styles.summary}>
        <hgroup className={styles.rewardHeader}>
          <Typography
            variant="Title/Subtitle/md"
            className={styles.rewardTitle}
          >
            <h2>{name}</h2>
          </Typography>
          <span className={styles.chevron}>
            <ChevronDown />
          </span>
        </hgroup>
      </summary>
      <Typography variant="Body/Supporting text (caption)/smRegular">
        <p
          className={styles.rewardDescription}
          dangerouslySetInnerHTML={{ __html: description }}
        />
      </Typography>
    </details>
  )
}