import { PropsWithChildren } from 'react'
import { Radio as AriaRadio } from 'react-aria-components'
import styles from './radio.module.css'
import { variants } from './variants'
import { cx } from 'class-variance-authority'

interface RadioProps extends PropsWithChildren {
  value: string
  id?: string
  isDisabled?: boolean
  color?: 'Burgundy'
}

export function Radio({ id, value, children, color, isDisabled }: RadioProps) {
  const inputId = id || `radio-${value}`

  const classNames = variants({
    color,
  })

  return (
    <AriaRadio
      id={inputId}
      value={value}
      isDisabled={isDisabled}
      className={cx(styles.container, { [styles.disabled]: isDisabled })}
    >
      <div className={`${styles.radio} ${classNames}`} />
      <div>{children}</div>
    </AriaRadio>
  )
}