import { ChevronDown, Minus } from "react-feather"

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

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

import {
  BenefitCardProps,
  BenefitValueProps,
} from "@/types/components/loyalty/blocks"

function BenefitValue({ benefit }: BenefitValueProps) {
  if (!benefit.unlocked) {
    return <Minus />
  }
  if (!benefit.value) {
    return <CheckCircle height={32} width={32} />
  }
  return (
    <div className={styles.benefitValueContainer}>
      <span className={styles.benefitValue}>{benefit.value}</span>
      {benefit.valueDetails && (
        <span className={styles.benefitValueDetails}>
          {benefit.valueDetails}
        </span>
      )}
    </div>
  )
}

export default function BenefitCard({
  comparedValues,
  title,
  description,
}: BenefitCardProps) {
  return (
    <div className={styles.benefitCard}>
      <div className={styles.benefitInfo}>
        <details className={styles.details}>
          <summary className={styles.summary}>
            <hgroup className={styles.benefitCardHeader}>
              <Title as="h5" level="h2" className={styles.benefitCardTitle}>
                {title}
              </Title>
              <span className={styles.chevron}>
                <ChevronDown />
              </span>
            </hgroup>
          </summary>
          <p className={styles.benefitCardDescription}>{description}</p>
        </details>
      </div>
      <div className={styles.benefitComparison}>
        {comparedValues.map((benefit, idx) => (
          <div key={idx} className={styles.comparisonItem}>
            <BenefitValue benefit={benefit} />
          </div>
        ))}
      </div>
    </div>
  )
}