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

import RewardCard from "./Card"

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

import type { RewardListProps } from "@/types/components/overviewTable"

export default function RewardList({ levels }: RewardListProps) {
  const keyedGroupedRewards = getGroupedRewards(levels)

  return Object.values(keyedGroupedRewards).map((groupedRewards) => {
    const rewardIdsInGroup = groupedRewards.map((b) => b.reward_id)

    const { label, description } = getGroupedLabelAndDescription(groupedRewards)

    const levelRewards = levels.map((level) => {
      return findAvailableRewards(rewardIdsInGroup, level)
    })

    return (
      <div
        key={levelRewards[0]?.reward_id ?? ""}
        className={styles.rewardCardWrapper}
      >
        <RewardCard
          title={label}
          description={description}
          comparedValues={levelRewards}
        />
      </div>
    )
  })
}