doc: added functionality and interface to ProductCard component

components/ProductCard.tsx

@@ -1,7 +1,41 @@
 import React from "react";
+import Link from "next/link";
+import { Product } from "@/types";
+import Image from "next/image";
 
-const ProductCard = () => {
-  return <div>ProductCard</div>;
+interface Props {
+  product: Product;
+}
+
+const ProductCard = ({ product }: Props) => {
+  return (
+    <Link href={`/products/${product._id}`} className="product-card">
+      <div className="product-card_img-container">
+        <Image
+          src={product.image}
+          alt={product.title}
+          width={200}
+          height={200}
+          className="product-card_img"
+        />
+      </div>
+
+      <div className="flex flex-col gap-3">
+        <h3 className="product-title">{product.title}</h3>
+      </div>
+
+      <div className="flex justify-between">
+        <p className="text-black opacity-50 text-lg capitalize">
+          {product.category}
+        </p>
+
+        <p className="text-black text-lg font-semibold">
+          <span>{product?.currency}</span>
+          <span>{product?.currentPrice}</span>
+        </p>
+      </div>
+    </Link>
+  );
 };
 
 export default ProductCard;