import React, { useMemo } from 'react';
import { v4 as uuidv4 } from 'uuid';

interface IRadioButton {
  value: string
  checked?: boolean
  name: string
  onChange: React.ChangeEventHandler<HTMLInputElement>
  label: React.ReactNode
}

/**
 * A group for radio input with label.
 */
const RadioButton: React.FC<IRadioButton> = ({ name, value, checked, onChange, label }) => {
  const formFieldId: string = useMemo(() => `radio-${uuidv4()}`, []);

  return (
    <div className='flex items-center'>
      <input
        type='radio'
        name={name}
        id={formFieldId}
        value={value}
        checked={checked}
        onChange={onChange}
        className='h-4 w-4 border-gray-300 text-primary-600 focus:ring-primary-500'
      />

      <label htmlFor={formFieldId} className='ml-3 block text-sm font-medium text-gray-700'>
        {label}
      </label>
    </div>
  );
};

export default RadioButton;