import { psa } from "@src/drizzle/schema/schema";
import { NextPage } from "next";


export default function ProductPage(props:any) {
  
  return (
    <div className="p-4 pt-16 mx-auto max-w-screen-lg">
      <div className="grid grid-cols-1 md:grid-cols-2 gap-8 mb-8">
        {/* Product Image */}
        <div className="bg-white rounded-lg shadow-md p-4">
          <img 
            src={props.imageUrl}
            alt="Product Name"
            className="w-full h-auto rounded-lg"
          />
        </div>

        {/* Product Info */}
        <div>
          <h1 className="text-3xl font-bold mb-4">{props.productName}</h1>
          
          {/* Vendor Pricing Table */}
          <div className="bg-white rounded-lg shadow-md p-4 mb-6">
            <h2 className="text-xl font-semibold mb-4">Available From</h2>
            <div className="overflow-x-auto">
              <table className="min-w-full table-auto">
                <thead>
                  <tr className="bg-gray-50 border-b">
                    <th className="px-4 py-2 text-left">Vendor</th>
                    <th className="px-4 py-2 text-left">Price</th>
                    <th className="px-4 py-2 text-left">Stock</th>
                    <th className="px-4 py-2 text-left">Action</th>
                  </tr>
                </thead>
                <tbody>
                  <tr className="border-b hover:bg-gray-50">
                    <td className="px-4 py-2">Vendor 1</td>
                    <td className="px-4 py-2">$199.99</td>
                    <td className="px-4 py-2">In Stock</td>
                    <td className="px-4 py-2">
                      <button className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600">
                        Buy Now
                      </button>
                    </td>
                  </tr>
                  <tr className="border-b hover:bg-gray-50">
                    <td className="px-4 py-2">Vendor 2</td>
                    <td className="px-4 py-2">$209.99</td>
                    <td className="px-4 py-2">Limited Stock</td>
                    <td className="px-4 py-2">
                      <button className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600">
                        Buy Now
                      </button>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>

      {/* Product Description */}
      <div className="bg-white rounded-lg shadow-md p-6 mb-8">
        <h2 className="text-xl font-semibold mb-4">Product Description</h2>
        <p className="text-gray-600">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
          Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        </p>
      </div>

      {/* Product Specifications */}
      <div className="bg-white rounded-lg shadow-md p-6">
        <h2 className="text-xl font-semibold mb-4">Specifications</h2>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
          <div className="border-b py-2">
            <span className="font-medium">Manufacturer:</span> Company Name
          </div>
          <div className="border-b py-2">
            <span className="font-medium">Model:</span> ABC-123
          </div>
          <div className="border-b py-2">
            <span className="font-medium">Weight:</span> 2.5 lbs
          </div>
          <div className="border-b py-2">
            <span className="font-medium">Dimensions:</span> 10" x 5" x 3"
          </div>
          <div className="border-b py-2">
            <span className="font-medium">Material:</span> Aluminum
          </div>
          <div className="border-b py-2">
            <span className="font-medium">Warranty:</span> 1 Year Limited
          </div>
        </div>
      </div>
    </div>
  );
}
