import React, { useEffect } from "react";

function CommonProductCard({ product }: any) {
  return (
    <>
      <div
        className="flex bg-white border border-gray-200 rounded-lg shadow-md "
        key={product.id}
      >
        <div className="lg:w-1/12 w-4/12">
          {product.image_path != null ? (
            <img
              className="rounded-t-lg  object-contain"
              src={product.image_path}
              alt=""
            />
          ) : (
            <></>
          )}
        </div>
        <div className="flex flex-col  justify-center">
          <div className="px-5 py-2">
            <div>
              {/* <>Product Name:</> */}
              <div className=" text-xl font-bold tracking-tight text-gray-900  ">
                {product.name}
              </div>
            </div>
          </div>
          <div className="px-5 py-2">
            <div>
              {/* <div className=" text-sm italic text-slate-400">Size:</div> */}
              <div className=" text-lg tracking-tight text-gray-900  ">
                {product.description}
              </div>
            </div>
          </div>
        </div>
      </div>
    </>
  );
}

export default CommonProductCard;