"use client"

import { CheckIcon, CloseIcon, HeartIcon } from "@/components/Icons"
import Caption from "@/components/TempDesignSystem/Text/Caption"
import Footnote from "@/components/TempDesignSystem/Text/Footnote"

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

import type { CheckboxCardProps } from "./card"

export default function CheckboxCard({
  Icon = HeartIcon,
  declined = false,
  list,
  name = "join",
  saving = false,
  subtitle,
  text,
  title,
}: CheckboxCardProps) {
  return (
    <label className={styles.checkbox} data-declined={declined} htmlFor={name}>
      <header className={styles.header}>
        <Caption className={styles.title} textTransform="bold" uppercase>
          {title}
        </Caption>
        {subtitle ? (
          <Caption
            className={styles.subtitle}
            color={saving ? "baseTextAccent" : "uiTextHighContrast"}
            textTransform="bold"
          >
            {subtitle}
          </Caption>
        ) : null}
        <Icon
          className={styles.icon}
          color="uiTextHighContrast"
          height={32}
          width={32}
        />
      </header>
      {list ? (
        <ul className={styles.list}>
          {list.map((listItem) => (
            <li key={listItem.title} className={styles.listItem}>
              {declined ? (
                <CloseIcon
                  color="uiTextMediumContrast"
                  height={20}
                  width={20}
                />
              ) : (
                <CheckIcon color="baseIconLowContrast" height={20} width={20} />
              )}
              <Footnote color="uiTextMediumContrast">{listItem.title}</Footnote>
            </li>
          ))}
        </ul>
      ) : null}
      {text ? <Footnote color="uiTextMediumContrast">{text}</Footnote> : null}
      <input aria-hidden id={name} hidden name={name} type="checkbox" />
    </label>
  )
}