content: import React from 'react';
  import { startCase } from 'lodash';
  import PropTypes from 'prop-types';
  import classnames from 'classnames';
  
  import RadioInput from '../../../components/FormInput/RadioInput';
  
  const RadioOptionsField = ({
    className,
    clearErrors,
    description,
    error,
    label,
    name,
    options,
    setData,
    stateData,
  }) => {
    const lastOptionIndex = options.length - 1;
  
    return (
      <div className={classnames('mb-10 relative', className)}>
        {label && <strong className="block font-bold mb-2">{label}</strong>}
  
        {description && (
          <small className="block mb-3 max-chars text-gray-600">
            {description}
          </small>
        )}
  
        {options.map((option, index) => {
          return (
            <div
              className={classnames('flex items-start', {
                'mb-4': index !== lastOptionIndex,
              })}
              key={index}
            >
              <RadioInput
                checked={stateData === option.id ? true : false}
                className={classnames(
                  'appearance-none bg-gray-200 checked:bg-blurple-500 border border-gray-300 cursor-pointer h-6 mr-2 rounded-full w-6',
                  { 'border-red-300': error },
                )}
                clearErrors={clearErrors}
                id={option.id}
                name={name}
                setData={setData}
                value={option.id}
              />
              <div className="flex-1">
                <label htmlFor={option.id}>{startCase(option.id)}</label>
  
                {option.description && (
                  <small className="block italic text-gray-600">
                    {option.description}
                  </small>
                )}
              </div>
            </div>
          );
        })}
  
        {error && (
          <small className="absolute block mt-2 text-red-500">{error}</small>
        )}
      </div>
    );
  };
  
  RadioOptionsField.propTypes = {
    className: PropTypes.string,
    clearErrors: PropTypes.func.isRequired,
    description: PropTypes.string,
    error: PropTypes.string,
    label: PropTypes.string,
    name: PropTypes.string,
    options: PropTypes.arrayOf(
      PropTypes.shape({
        description: PropTypes.string,
        id: PropTypes.string,
      }),
    ),
    setData: PropTypes.func.isRequired,
    stateData: PropTypes.string,
  };
  
  RadioOptionsField.defaultProps = {
    className: null,
    description: null,
    error: null,
    label: null,
    name: null,
    options: [],
    stateData: null,
  };
  
  export default RadioOptionsField;
  