import React, { useState } from 'react';

const LCPFormRepeater = ({ fields, onSubmit }) => {
  const [formData, setFormData] = useState(
    fields.map(() => ({
      value: '', // Initialize empty value for each field
    }))
  );

  // Handle input field change
  const handleChange = (index, event) => {
    const updatedData = [...formData];
    updatedData[index].value = event.target.value;
    setFormData(updatedData);
  };

  // Handle form submission
  const handleSubmit = (event) => {
    event.preventDefault();
    onSubmit(formData); // Call the passed in onSubmit callback with the form data
  };

  return (
    <form onSubmit={handleSubmit}>
      {fields.map((field, index) => (
        <div key={index} className="form-field">
          {/* Render the corresponding input field based on the field type */}
          <label>{field.label}</label>
          {field.type === 'text' && (
            <input
              type="text"
              value={formData[index].value}
              onChange={(e) => handleChange(index, e)}
              placeholder={field.placeholder}
            />
          )}
          {field.type === 'number' && (
            <input
              type="number"
              value={formData[index].value}
              onChange={(e) => handleChange(index, e)}
              placeholder={field.placeholder}
            />
          )}
          {field.type === 'email' && (
            <input
              type="email"
              value={formData[index].value}
              onChange={(e) => handleChange(index, e)}
              placeholder={field.placeholder}
            />
          )}
          {field.type === 'textarea' && (
            <textarea
              value={formData[index].value}
              onChange={(e) => handleChange(index, e)}
              placeholder={field.placeholder}
            />
          )}
        </div>
      ))}
      <button type="submit">Submit</button>
    </form>
  );
};

export default LCPFormRepeater;