import { React, PropTypes } from '@gravityforms/libraries';
import FormField from './form-field';

/**
 * @module FormFields
 * @description Renders a form field based on passed field data from the server.
 *
 * @since 3.1.0
 *
 * @param {object}   props              Component props.
 * @param {string}   props.id           The form field ID.
 * @param {object}   props.fields       Fields data.
 * @param {Function} props.setFieldData Passed handler for field changes if the field type supports it.
 *
 * @return {JSX.Element} The FormField component.
 */
const FormFields = ( { id, fields, setFieldData } ) => {
	return (
		<>
			{ fields.map( ( field, index ) => {
				const fieldId = `${ id }-${ index }`;
				return <FormField key={ fieldId } id={ fieldId } field={ field } setFieldData={ setFieldData } />;
			} ) }
		</>
	);
};

FormFields.propTypes = {
	id: PropTypes.string,
	fields: PropTypes.array,
	setFieldData: PropTypes.func,
};

export default FormFields;
