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

'use client'

import { cx } from 'class-variance-authority'
import { Label, Radio, RadioGroup, Text } from 'react-aria-components'

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

import styles from './radioButtonsGroup.module.css'
interface Option {
  value: string
  title: string
  text: string
}
interface RadioButtonsGroupProps {
  options: Option[]
  onChange: (value: string) => void
  ariaLabel: string
  defaultOption?: Option
}
export function RadioButtonsGroup({
  options,
  onChange,
  ariaLabel,
  defaultOption,
}: RadioButtonsGroupProps) {
  return (
    <RadioGroup
      className={styles.radioButtons}
      onChange={onChange}
      aria-label={ariaLabel}
      defaultValue={defaultOption?.value}
    >
      {options.map((option) => (
        <Radio
          key={option.value}
          value={option.value}
          className={({ isFocusVisible, isSelected, isHovered, isDisabled }) =>
            cx(styles.option, {
              [styles.focused]: isFocusVisible,
              [styles.selected]: isSelected,
              [styles.hovered]: isHovered,
              [styles.disabled]: isDisabled,
            })
          }
        >
          {({ isSelected, isDisabled }) => (
            <div className={styles.card}>
              <span className={styles.titleContainer}>
                <span
                  className={cx(styles.radio, {
                    [styles.selected]: isSelected,
                    [styles.disabled]: isDisabled,
                  })}
                  aria-hidden
                />
                <Typography variant="Title/Subtitle/md">
                  <Label>{option.title}</Label>
                </Typography>
              </span>
              <span className={styles.bottom}>
                <Divider />
                <Typography variant="Body/Supporting text (caption)/smRegular">
                  <Text slot="description">{option.text}</Text>
                </Typography>
              </span>
            </div>
          )}
        </Radio>
      ))}
    </RadioGroup>
  )
}