import PageHero from "@components/PageHero";

export default function ProductsPage() {
    return (
      <div>
        <PageHero 
        title="Builder"
      />
        <div className="container mx-auto p-4">
        <div className="bg-white rounded-lg shadow-md p-6 overflow-x-auto text-gray-600">
        <table className="min-w-full table-auto">
          <thead>
            <tr className="bg-gray-50 border-b">
              <th className="px-4 py-2 text-left">Component</th>
              <th className="px-4 py-2 text-left">Selection</th>
              <th className="px-4 py-2 text-left">Caliber</th>
              <th className="px-4 py-2 text-left">Price</th>
              <th className="px-4 py-2 text-left">Shipping</th>
              <th className="px-4 py-2 text-left">Where</th>
            </tr>
          </thead>
          <tbody>
            {[
              "Lower Receiver",
              "Upper Receiver",
              "Barrel",
              "Handguard",
              "Bolt Carrier Group",
              "Charging Handle",
              "Buffer Tube",
              "Stock",
              "Grip",
              "Trigger",
              "Magazine"
            ].map((component) => (
              <tr key={component} className="border-b hover:bg-gray-50">
                <td className="px-4 py-2">{component}</td>
                <td className="px-4 py-2">
                  <button className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600">
                    Choose a Part
                  </button>
                </td>
                <td className="px-4 py-2">-</td>
                <td className="px-4 py-2">-</td>
                <td className="px-4 py-2">-</td>
                <td className="px-4 py-2">-</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
      
      </div>
      
    );
  }