45 lines
1.2 KiB
TypeScript
45 lines
1.2 KiB
TypeScript
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>
|
|
)
|
|
})
|
|
}
|