'use client';

import * as React from 'react';
import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
import { clsx } from 'clsx';

export const RadioGroup = React.forwardRef<
  React.ElementRef<typeof RadioGroupPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>
>(({ className, ...props }, ref) => (
  <RadioGroupPrimitive.Root ref={ref} className={clsx('grid gap-2', className)} {...props} />
));

RadioGroup.displayName = 'RadioGroup';

export interface RadioGroupItemProps extends React.ComponentPropsWithoutRef<
  typeof RadioGroupPrimitive.Item
> {
  label?: React.ReactNode;
}

export const RadioGroupItem = React.forwardRef<
  React.ElementRef<typeof RadioGroupPrimitive.Item>,
  RadioGroupItemProps
>(({ label, className, id, ...props }, ref) => {
  const generatedId = React.useId();
  const radioId = id ?? (label ? `radio-${generatedId}` : undefined);

  return (
    <label className="inline-flex items-center gap-2 text-sm text-[var(--bl-text-primary)]">
      <RadioGroupPrimitive.Item
        ref={ref}
        id={radioId}
        className={clsx(
          'flex h-4 w-4 items-center justify-center rounded-full border border-[var(--bl-border)] bg-[var(--bl-surface-card)]',
          'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--bl-accent)]',
          'data-[state=checked]:border-[var(--bl-accent)]',
          className
        )}
        {...props}
      >
        <RadioGroupPrimitive.Indicator className="h-2 w-2 rounded-full bg-[var(--bl-accent)]" />
      </RadioGroupPrimitive.Item>
      {label}
    </label>
  );
});

RadioGroupItem.displayName = 'RadioGroupItem';
