import { ChevronDown } from "react-feather"

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

import RewardValue from "../../RewardValue"

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

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

export default function RewardCard({
  comparedValues,
  title,
  description,
}: RewardCardProps) {
  return (
    <div className={styles.rewardCard}>
      <div className={styles.rewardInfo}>
        <details className={styles.details}>
          <summary className={styles.summary}>
            <hgroup className={styles.rewardCardHeader}>
              <Title as="h4" level="h2" textTransform={"regular"}>
                {title}
              </Title>
              <span className={styles.chevron}>
                <ChevronDown />
              </span>
            </hgroup>
          </summary>
          <p
            className={styles.rewardCardDescription}
            dangerouslySetInnerHTML={{ __html: description }}
          />
        </details>
      </div>
      <div className={styles.rewardComparison}>
        {comparedValues.map((reward, idx) => (
          <div
            key={`${reward?.reward_id}-${idx}`}
            className={styles.comparisonItem}
          >
            <RewardValue reward={reward} />
          </div>
        ))}
      </div>
    </div>
  )
}