import * as React from 'react'
import * as RadioGroupPrimitive from '@radix-ui/react-radio-group'
import tw from 'twin.macro'

const RadioGroup = React.forwardRef<
  React.ElementRef<typeof RadioGroupPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>
>(({ ...props }, ref) => (
  <RadioGroupPrimitive.Root css={[tw`grid gap-2`]} {...props} ref={ref} />
))
RadioGroup.displayName = RadioGroupPrimitive.Root.displayName

const RadioGroupItem = React.forwardRef<
  React.ElementRef<typeof RadioGroupPrimitive.Item>,
  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>
>(({ children, ...props }, ref) => (
  <RadioGroupPrimitive.Item
    ref={ref}
    css={[
      tw`
        h-4 w-4
        rounded-full
        border
        border-slate-300
        text-slate-900
        hover:border-slate-400
        focus:outline-none
        focus:ring-2
        focus:ring-slate-400
        focus:ring-offset-2
        disabled:cursor-not-allowed
        disabled:opacity-50
        dark:border-slate-700
        dark:text-slate-100
        dark:hover:text-slate-100
        dark:focus:ring-slate-400
        dark:focus:ring-offset-slate-900
      `,
    ]}
    {...props}
  >
    <RadioGroupPrimitive.Indicator tw="flex items-center justify-center">
      <div tw="h-2.5 w-2.5 bg-[var(--indicator, currentColor)] rounded-full">
        {children}
      </div>
    </RadioGroupPrimitive.Indicator>
  </RadioGroupPrimitive.Item>
))
RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName

const _RadioGroup = RadioGroup
export { _RadioGroup as Root, RadioGroupItem as Item }
