type RadioButtonProps = {
  radioBtnId: string;
  label: string;
  isChecked: boolean;
  onChange: () => void;
};

function RadioButton({
  radioBtnId,
  label,
  isChecked,
  onChange,
}: RadioButtonProps) {
  return (
    <div>
      <input
        aria-checked={isChecked}
        aria-label={`Radio button for ${label}`}
        checked={isChecked}
        className="size-4 border-gray-300 text-bold-forestTeal focus:text-bold-forestTeal focus:ring-1 focus:ring-offset-1 focus:ring-bold-forestTeal my-2"
        id={radioBtnId}
        name={radioBtnId}
        type="radio"
        onChange={onChange}
      />
      <label className="ms-2 font-xs" htmlFor={radioBtnId}>
        {label}
      </label>
    </div>
  );
}

export default RadioButton;