import BenefitCard from "../BenefitCard"

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

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

export default function BenefitList({ levels }: BenefitListProps) {
  const highestTier = levels.reduce(
    (acc: ComparisonLevel | null, level: ComparisonLevel) => {
      if (!acc) {
        return level
      }
      return level.tier > acc.tier ? level : acc
    },
    null
  )

  return highestTier?.benefits
    .filter((benefit) => benefit.unlocked)
    .map((benefit, idx) => {
      const levelBenefits = levels.map((level) => level.benefits[idx])
      return (
        <div key={benefit.name} className={styles.benefitCardWrapper}>
          <div className={styles.firstColumn} />
          <div className={styles.secondColumn} />
          <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>
      )
    })
}