import React from "react";
import { RadioGroup, FormControlLabel, Radio, FormHelperText } from "@mui/material";
import PropTypes from "prop-types";

function RadioInput({ field, disabled, onChange, error, helperText }) {
  let options = [];
try {
  options = field.Options ? JSON.parse(field.Options) : [];
} catch (e) {
  console.warn("Invalid options JSON for", field.Label, e);
  options = []; 
}

  return (
    <div id={`field-${field.Id}`}>
      <RadioGroup
        row
        value={field.ProValue || ""}
        onChange={(e) => onChange(e.target.value)}
      >
        {options.map((opt, idx) => (
          <FormControlLabel
            key={opt}
            value={opt}
            control={<Radio disabled={disabled} />}
            label={opt}
          />
        ))}
      </RadioGroup>
      <FormHelperText error={error}>{helperText}</FormHelperText>
    </div>
  );
}

export default RadioInput;

RadioInput.propTypes = {
  field: PropTypes.shape({
    Id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
    Label: PropTypes.string.isRequired,
    ProValue: PropTypes.string,
    Options: PropTypes.string,
  }).isRequired,
  disabled: PropTypes.bool,
  onChange: PropTypes.func.isRequired,
  error: PropTypes.bool,
  helperText: PropTypes.string,
};
