import { Minus } from "react-feather"

import CheckCircle from "@/components/Icons/CheckCircle"

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

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

export default function BenefitValue({ benefit }: BenefitValueProps) {
  if (!benefit.unlocked) {
    return <Minus color="var(--UI-Grey-40)" />
  }
  if (!benefit.value) {
    return <CheckCircle height={32} width={32} color="green" />
  }
  return (
    <div className={styles.benefitValueContainer}>
      <span className={styles.benefitValue}>{benefit.value}</span>
      {benefit.valueDetails && (
        <span className={styles.benefitValueDetails}>
          {benefit.valueDetails}
        </span>
      )}
    </div>
  )
}