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"
  wrapping?: boolean
}

export function Radio({
  id,
  value,
  children,
  color,
  isDisabled,
  wrapping = true,
}: 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,
        [styles.wrapping]: wrapping,
      })}
    >
      <div className={`${styles.radio} ${classNames}`} />
      {children && <div>{children}</div>}
    </AriaRadio>
  )
}