import { ChevronDown } from "react-feather"

import Title from "@/components/TempDesignSystem/Text/Title"

import BenefitValue from "../BenefitValue"

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

import type { BenefitCardProps } from "@/types/components/overviewTable"

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"
                textTransform={"regular"}
                className={styles.benefitCardTitle}
              >
                {title}
              </Title>
              <span className={styles.chevron}>
                <ChevronDown />
              </span>
            </hgroup>
          </summary>
          <p
            className={styles.benefitCardDescription}
            dangerouslySetInnerHTML={{ __html: description }}
          />
        </details>
      </div>
      <div className={styles.benefitComparison}>
        {comparedValues.map((benefit, idx) => (
          <div
            key={`${benefit.valueDetails}-${idx}`}
            className={styles.comparisonItem}
          >
            <BenefitValue benefit={benefit} />
          </div>
        ))}
      </div>
    </div>
  )
}