"use client"

import { useFormContext } from "react-hook-form"

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 { CardProps } from "./card"

export default function Card({
  Icon = HeartIcon,
  iconHeight = 32,
  iconWidth = 32,
  declined = false,
  highlightSubtitle = false,
  id,
  list,
  name,
  subtitle,
  text,
  title,
  type,
  value,
}: CardProps) {
  const { register } = useFormContext()

  return (
    <label className={styles.label} data-declined={declined}>
      <Caption className={styles.title} textTransform="bold" uppercase>
        {title}
      </Caption>
      {subtitle ? (
        <Caption
          className={styles.subtitle}
          color={highlightSubtitle ? "baseTextAccent" : "uiTextHighContrast"}
          textTransform="bold"
        >
          {subtitle}
        </Caption>
      ) : null}
      <Icon
        className={styles.icon}
        color="uiTextHighContrast"
        height={iconHeight}
        width={iconWidth}
      />
      {list
        ? list.map((listItem) => (
            <span 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>
            </span>
          ))
        : null}
      {text ? (
        <Footnote className={styles.text} color="uiTextMediumContrast">
          {text}
        </Footnote>
      ) : null}
      <input
        aria-hidden
        id={id || name}
        hidden
        type={type}
        value={value}
        {...register(name)}
      />
    </label>
  )
}