import React, { useState } from 'react';

const App = () => {
  // Initialize with one set of input boxes
  const [inputSets, setInputSets] = useState([{ id: Date.now() }]);

  const handleAddClick = () => {
    // Add a new set of input boxes
    setInputSets([...inputSets, { id: Date.now() }]);
  };

  const handleDeleteClick = (id) => {
    // Ensure at least one set of input boxes remains
    if (inputSets.length > 1) {
      setInputSets(inputSets.filter(set => set.id !== id));
    }
  };

  return (
    <div>
      <button onClick={handleAddClick}>
        Add Input Boxes
      </button>

      {inputSets.map(set => (
        <div key={set.id} style={{ marginBottom: '10px' }}>
          <input type="text" placeholder="Input 1" />
          <input type="text" placeholder="Input 2" />
          {/* Conditionally render the delete button */}
          {inputSets.length > 1 && (
            <button 
              onClick={() => handleDeleteClick(set.id)} 
              style={{ marginLeft: '10px' }}
            >
              Delete
            </button>
          )}
        </div>
      ))}
    </div>
  );
};

export default App;