import { getHighestLevel } from "@/utils/loyaltyTable"

import BenefitCard from "../BenefitCard"

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

import { BenefitListProps } from "@/types/components/loyalty/blocks"

export default function BenefitList({ levels }: BenefitListProps) {
  const highestLevel = getHighestLevel(levels)
  return highestLevel?.benefits
    .filter((benefit) => benefit.unlocked)
    .map((benefit, idx) => {
      const levelBenefits = levels.map((level) => level.benefits[idx])
      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>
      )
    })
}