web/packages/design-system/lib/components/Form/RadioCard/index.tsx

'use client'

import { cx } from 'class-variance-authority'
import { useFormContext } from 'react-hook-form'

import { Divider } from '../../Divider'
import { MaterialIcon } from '../../Icons/MaterialIcon'
import { Typography } from '../../Typography'

import styles from './radioCard.module.css'

import type { RadioCardProps } from './types'

export default function RadioCard({
  Icon,
  iconHeight = 32,
  id,
  name,
  title,
  subtitleSecondary,
  subtitle,
  value,
  disabled = false,
  description,
  descriptionSecondary,
}: RadioCardProps) {
  const { register, setValue } = useFormContext()

  function onLabelClick(event: React.MouseEvent) {
    // Preventing click event on label elements firing twice: https://github.com/facebook/react/issues/14295
    event.preventDefault()
    if (!disabled) {
      setValue(name, value)
    }
  }

  function onKeyDown(event: React.KeyboardEvent) {
    if (disabled) return

    if (event.key === 'Enter') {
      setValue(name, value)
    }
  }

  return (
    <label
      className={cx(styles.label, { [styles.disabled]: disabled })}
      onClick={onLabelClick}
      onKeyDown={onKeyDown}
      tabIndex={0}
    >
      <div className={styles.selectedIcon}>
        <MaterialIcon icon="check" size={22} color="Icon/Inverted" />
      </div>
      {Icon ? (
        <Icon
          className={styles.icon}
          color="CurrentColor"
          height={iconHeight}
        />
      ) : null}
      <Typography variant="Body/Paragraph/mdBold" className={styles.title}>
        <p>{title}</p>
      </Typography>
      {subtitleSecondary ? (
        <Typography
          variant="Body/Supporting text (caption)/smRegular"
          className={styles.subtitleSecondary}
        >
          <p>{subtitleSecondary}</p>
        </Typography>
      ) : null}
      <Typography variant="Body/Paragraph/mdBold" className={styles.subtitle}>
        <p>{subtitle}</p>
      </Typography>

      {description || descriptionSecondary ? (
        <Divider className={styles.divider} />
      ) : null}

      {description ? (
        <Typography
          variant="Body/Supporting text (caption)/smRegular"
          className={styles.description}
        >
          <p>{description}</p>
        </Typography>
      ) : null}

      {descriptionSecondary ? (
        <Typography
          variant="Body/Supporting text (caption)/smRegular"
          className={styles.descriptionSecondary}
        >
          <p>{descriptionSecondary}</p>
        </Typography>
      ) : null}

      <input
        {...register(name)}
        aria-hidden
        id={id || name}
        hidden
        type="radio"
        disabled={disabled}
        value={value}
      />
    </label>
  )
}