import * as React from 'react'
import * as RRadio from '@radix-ui/react-radio-group'
import { cn } from './cva'

export interface RadioGroupProps {
  value?: string
  defaultValue?: string
  onValueChange?(v: string): void
  name?: string
  disabled?: boolean
  'aria-label'?: string
  'aria-labelledby'?: string
  children: React.ReactNode
  className?: string
}

export function RadioGroup({ className, children, ...props }: RadioGroupProps) {
  return (
    <RRadio.Root className={cn('flex flex-col gap-2', className)} {...props}>
      {children}
    </RRadio.Root>
  )
}

export interface RadioProps {
  value: string
  id?: string
  disabled?: boolean
  'aria-label'?: string
  className?: string
}

export const Radio = React.forwardRef<HTMLButtonElement, RadioProps>(
  ({ className, ...props }, ref) => (
    <RRadio.Item
      ref={ref}
      className={cn(
        'h-4 w-4 rounded-full border border-border bg-surface focus-visible:outline focus-visible:outline-accent disabled:opacity-50 disabled:cursor-not-allowed data-[state=checked]:border-accent',
        className,
      )}
      {...props}
    >
      <RRadio.Indicator className="flex h-full w-full items-center justify-center after:block after:h-2 after:w-2 after:rounded-full after:bg-accent" />
    </RRadio.Item>
  ),
)
Radio.displayName = 'Radio'