import { findBenefit, getUnlockedBenefits } from "@/utils/loyaltyTable"

import BenefitCard from "../BenefitCard"

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

import type { BenefitListProps } from "@/types/components/content/blocks"

export default function BenefitList({ levels }: BenefitListProps) {
  return getUnlockedBenefits(levels).map((benefit) => {
    const levelBenefits = levels.map((level) => {
      return findBenefit(benefit, level)
    })
    return (
      <div key={benefit.name} className={styles.benefitCardWrapper}>
        <BenefitCard
          title={benefit.name}
          description={benefit.description}
          comparedValues={levelBenefits.map((benefit, idx) => {
            return {
              key: `${benefit.name}-${idx}`,
              value: benefit.value,
              unlocked: benefit.unlocked,
              valueDetails: benefit.valueDetails,
            }
          })}
        />
      </div>
    )
  })
}