import { useState } from 'react';

const BillingForm = () => {
  const [items, setItems] = useState([
    { itemName: '', quantity: 0, price: 0 },
  ]);

  const handleItemChange = (index, event) => {
    const { name, value } = event.target;
    const newItems = [...items];
    newItems[index][name] = value;
    setItems(newItems);
  };

  const addNewItem = () => {
    setItems([...items, { itemName: '', quantity: 0, price: 0 }]);
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    // Handle form submission with items data
    console.log(items);
  };

  return (
    <form onSubmit={handleSubmit}>
      {items.map((item, index) => (
        <div key={index}>
          <input
            type="text"
            name="itemName"
            value={item.itemName}
            onChange={(e) => handleItemChange(index, e)}
            placeholder="Item Name"
          />
          <input
            type="number"
            name="quantity"
            value={item.quantity}
            onChange={(e) => handleItemChange(index, e)}
            placeholder="Quantity"
          />
          <input
            type="number"
            name="price"
            value={item.price}
            onChange={(e) => handleItemChange(index, e)}
            placeholder="Price"
          />
        </div>
      ))}
      <button type="button" onClick={addNewItem}>
        Add Item
      </button>
      <button type="submit">Submit</button>
    </form>
  );
};

export default BillingForm;