refactor: organize css

components/Loyalty/Blocks/DynamicContent/OverviewTable/BenefitCard/index.tsx

@@ -0,0 +1,63 @@
+import { ChevronDown, Minus } from "react-feather"
+
+import CheckCircle from "@/components/Icons/CheckCircle"
+import Title from "@/components/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>
+  )
+}