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

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={`${styles.container} ${isDisabled ? styles.disabled : ''}`}
    >
      <div className={`${styles.radio} ${classNames}`} />
      <div>{children}</div>
    </AriaRadio>
  )
}
