import { useState } from "react";

export default function Builder() {
  const [build, setBuild] = useState([]);
  const [part, setPart] = useState("");

  const addPartToBuild = () => {
    if (part) {
      setBuild([...build, part]);
      setPart("");
    }
  };

  const removePartFromBuild = (index) => {
    setBuild(build.filter((_, i) => i !== index));
  };

  return (
    <div className="bg-gray-100 min-h-screen p-6">
      <div className="max-w-3xl mx-auto">
        <h1 className="text-3xl font-bold text-center mb-6">Build Your Firearm</h1>
        <div className="bg-white shadow-md rounded p-6">
          <div className="flex items-center space-x-4">
            <input
              type="text"
              placeholder="Enter part name (e.g., Barrel, Scope)"
              className="border border-gray-300 p-2 rounded w-full"
              value={part}
              onChange={(e) => setPart(e.target.value)}
            />
            <button
              className="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-700"
              onClick={addPartToBuild}
            >
              Add Part
            </button>
          </div>
          <h2 className="text-xl font-bold mt-6">Current Build</h2>
          <ul className="list-disc list-inside mt-4">
            {build.map((p, index) => (
              <li key={index} className="flex justify-between items-center">
                <span>{p}</span>
                <button
                  className="text-red-500 hover:underline"
                  onClick={() => removePartFromBuild(index)}
                >
                  Remove
                </button>
              </li>
            ))}
          </ul>
        </div>
      </div>
    </div>
  );
}