import React from 'react';

const RadioList = ({
  items,
  formData,
  handleChange,
  fieldName,
  icon: Icon,
  className,
  sectionLabel,
  required,
}) => {
  return (
    <div className={`mb-4 ${className}`}>
      {sectionLabel && (
        <h3 className="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">
            <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-emerald-600 focus:ring-emerald-500 hover:ring-emerald-400 checked:bg-emerald-600 cursor-pointer"
              style={{ outline: 'none', boxShadow: 'none' }}
            />
            <label
              htmlFor={`${fieldName}-${item.id}`}
              className="ml-2 block text-sm text-gray-900 flex items-center cursor-pointer"
            >
              {item.label}
            </label>
          </div>
        ))}
      </div>
    </div>
  );
};

export default RadioList;