n3wt-school/Front-End/src/components/Form/RadioList.js

import React from 'react';

const RadioList = ({
  items,
  formData,
  handleChange,
  fieldName,
  icon: Icon,
  className,
  sectionLabel,
  required,
  disabled = false,
}) => {
  return (
    <div className={`mb-4 ${className}`}>
      {sectionLabel && (
        <h3 className="font-headline text-lg font-semibold text-gray-800 mb-2">
          {sectionLabel}
          {required && <span className="text-red-500 ml-1">*</span>}
        </h3>
      )}
      <div className="grid grid-cols-1 gap-4">
        {items.map((item) => (
          <div
            key={item.id}
            className={`flex items-center ${
              disabled ? 'opacity-50 cursor-not-allowed' : ''
            }`}
          >
            <input
              key={`${item.id}-${Math.random()}`}
              type="radio"
              id={`${fieldName}-${item.id}`}
              name={fieldName}
              value={item.id}
              checked={parseInt(formData[fieldName], 10) === item.id}
              onChange={handleChange}
              className="form-radio h-4 w-4 text-primary focus:ring-primary hover:ring-tertiary checked:bg-primary cursor-pointer"
              style={{ outline: 'none', boxShadow: 'none' }}
              disabled={disabled}
            />
            <label
              htmlFor={`${fieldName}-${item.id}`}
              className={`ml-2 block text-sm text-gray-900 flex items-center ${
                disabled ? 'cursor-not-allowed' : 'cursor-pointer'
              }`}
            >
              {item.label}
            </label>
          </div>
        ))}
      </div>
    </div>
  );
};

export default RadioList;