import * as React from 'react'
import * as RadioGroupPrimitive from '@radix-ui/react-radio-group'
import { cn } from '@/lib/utils/cn'

function RadioGroup({
  className,
  ...props
}: React.ComponentProps<typeof RadioGroupPrimitive.Root>) {
  return (
    <RadioGroupPrimitive.Root
      data-slot="radio-group"
      className={cn('grid gap-3', className)}
      {...props}
    />
  )
}

interface RadioGroupItemProps extends React.ComponentProps<typeof RadioGroupPrimitive.Item> {
  label: string
}

function RadioGroupItem({ className, label, ...props }: RadioGroupItemProps) {
  return (
    <div className="flex items-center gap-3">
      <RadioGroupPrimitive.Item
        data-slot="radio-group-item"
        className={cn(
          'peer relative flex h-5 w-5 shrink-0 items-center justify-center rounded-full border border-grey-500 ring-offset-background transition-all hover:border-grey-300 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
          className,
        )}
        {...props}
      >
        <div className="absolute h-2.5 w-2.5 rounded-full bg-white peer-checked:bg-primary" />
      </RadioGroupPrimitive.Item>
      <label
        htmlFor={props.id}
        className="label-medium-regular text-grey-100 cursor-pointer peer-disabled:opacity-50 peer-disabled:cursor-not-allowed"
      >
        {label}
      </label>
    </div>
  )
}

export { RadioGroup, RadioGroupItem }
