//   <div className="text-sm lg:text-left w-full lg:w-1/3 my-6">
//   <hr className="w-1/3 lg:hidden my-2" />
//   <p className="text-gray-500 text-left lg:text-center">
//     JazzAgain Portal Status
//   </p>

//   <div className="outline-none lg:text-center">
//     {item.productAvailability == 1 ? (
//       <p>Unsold</p>
//     ) : (
//       <p>Sold Out</p>
//     )}
//   </div>
// </div>



//   <div className="lg:w-1/3 flex flex-col lg:items-start">
//   <hr className="w-1/3 lg:hidden my-2" />
//   <div className="text-gray-500 text-left lg:text-center">
//     Buyers Details
//   </div>

//   {buyerDetails[item._id] && buyerDetails[item._id].length > 0 ? (

//     <div>
//       {buyerDetails[item._id].map(

//         (buyerItem: any, index: number) => (
//           <>
//             <div key={index} className="text-sm">
//               <div>
//                 {/* <span>Username:</span>{" "} */}
//                 <span>{buyerItem.userFirstName}
//                   <button type="button"
//                     onClick={() => openChat(item)}
//                     className="bg-black m-1 text-white p-2 rounded-md"
//                   >Chat
//                   </button>
//                 </span>

//               </div>
//             </div>
//             <span style={{ overflow: "hidden" }}>{buyerItem.userAddress}
//             </span>
//             <br />
//             <span style={{ overflow: "hidden" }}>{buyerItem.userPhone}
//             </span>
//           </>
//         )
//       )}
//     </div>


//   ) : (
//     <div>N.A.</div>
//   )}
// </div>


import React, { useState, useEffect } from "react";
import { Button } from "primereact/button";
import { Rating } from "primereact/rating";
import { Tag } from "primereact/tag";
import "primereact/resources/themes/lara-light-cyan/theme.css";
import Image from "next/image";
import { DataView, DataViewLayoutOptions } from "primereact/dataview";
import "primereact/resources/primereact.min.css";
import "primereact/resources/themes/lara-light-cyan/theme.css";

// Define the Product type
type Product = {
  id: string;
  code: string;
  name: string;
  description: string;
  image: string;
  price: number;
  category: string;
  quantity: number;
  inventoryStatus: string;
  rating: number;
};

// Define ProductService with hardcoded data
const ProductService = {
  getProductsSmall: () => {
    return Promise.resolve([
      {
        id: "1000",
        code: "f230fh0g3",
        name: "Bamboo Watch",
        description: "Product Description",
        image: "/bamboo-watch.jpg",
        price: 65,
        category: "Accessories",
        quantity: 24,
        inventoryStatus: "INSTOCK",
        rating: 5,
      },
      {
        id: "1001",
        code: "nvklal433",
        name: "Black Watch",
        description: "Product Description",
        image: "/black-watch.jpg",
        price: 72,
        category: "Accessories",
        quantity: 61,
        inventoryStatus: "LOWSTOCK",
        rating: 4,
      },
      // Add more products here as needed
    ]);
  },
};

export default function ProductPage() {
  const [products, setProducts] = useState<Product[]>([]);
  const [layout, setLayout] = useState("grid");

  useEffect(() => {
    ProductService.getProductsSmall().then((data: Product[]) =>
      setProducts(data)
    );
  }, []);

  const getSeverity = (product: Product) => {
    switch (product.inventoryStatus) {
      case "INSTOCK":
        return "success";
      case "LOWSTOCK":
        return "warning";
      case "OUTOFSTOCK":
        return "danger";
      default:
        return null;
    }
  };

  const productTemplate = (product: Product) => {
    return (
      <div className="col-12 sm:col-6 lg:col-4 p-3">
        <div className="product-item border-round shadow-2 p-4 surface-card">
          <div className="product-image mb-3">
            <Image
              src={product.image}
              alt={product.name}
              width={150}
              height={150}
            />
          </div>
          <div className="product-detail">
            <h5 className="text-xl font-semibold">{product.name}</h5>
            <p className="mt-1 mb-2 text-700">{product.description}</p>
            <Rating
              value={product.rating}
              readOnly
              cancel={false}
              className="mr-2"
            />
            <Tag
              value={product.inventoryStatus}
              severity={getSeverity(product)}
            />
          </div>
          <div className="product-footer flex justify-between mt-4">
            <span className="text-xl font-bold">${product.price}</span>
            <Button
              label="Add to Cart"
              icon="pi pi-shopping-cart"
              className="p-button-outlined"
            />
          </div>
        </div>
      </div>
    );
  };

  return (
    <div className="card">
      <h3 className="mb-4">Product List</h3>
      <DataView
        value={products}
       layout="grid"
        itemTemplate={productTemplate}
        paginator
        rows={9}
      />
    </div>
  );
}