import { forwardRef, type InputHTMLAttributes } from 'react';
import { cn } from '@lib/utils/cn';

export interface RadioProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> {
  label?: string;
}

export const Radio = forwardRef<HTMLInputElement, RadioProps>(
  ({ className, label, id, ...props }, ref) => {
    const inputId = id ?? `rd-${Math.random().toString(36).slice(2, 8)}`;
    return (
      <label htmlFor={inputId} className="inline-flex items-center gap-1.5 cursor-pointer select-none">
        <input
          ref={ref}
          id={inputId}
          type="radio"
          className={cn(
            'w-3.5 h-3.5 border-slate-600/60 bg-surface-overlay',
            'accent-blue-500 cursor-pointer disabled:cursor-not-allowed disabled:opacity-50',
            className,
          )}
          {...props}
        />
        {label && <span className="text-xs text-label">{label}</span>}
      </label>
    );
  },
);
Radio.displayName = 'Radio';