Product Card - Copy this React, Tailwind Component to your project

import-React-from-"react";-import-Rating-from-"../ui/Rating";-import-Image-from-"next/image";-import-Link-from-"next/link";-import-{-products-}-from-"@/types/product.types";-type-ProductCardProps-=-{-data:-products;-};-const-ProductCard-=-({-data-}:-ProductCardProps)-=>-{-return-(-<Link-href={`/shop/product/${data.id}/${data.title.split("-").join("-")}`}-className="flex-flex-col-items-start-aspect-auto"->-<div-className="border-border-gray-200-bg-white-rounded-lg-p-3-w-72-h-[400px]">-<div-className="-rounded-[13px]-lg:rounded-[20px]-w-60-ng-white-lg:max-w-[295px]-aspect-square-mb-2.5-xl:mb-4-overflow-hidden-border-black">-<Image-src={data.image}-width={295}-height={298}-className="rounded-md-w-full-h-full-object-contain-hover:scale-105-transition-all-duration-500"-alt={data.title}-priority-/>-</div>-<div-className="-ml-3">-<p-className="text-[14px]-font-sans-leading-1">{data.category}</p>-</div>-<div-className="-ml-3-">-<Link-href={`/shop/product/${data.id}`}>-<h2-className="-pb-1-text-[10px]-leading-3">{data.title}</h2>-</Link>-</div>-<div-className="flex-items-end-ml-3-mb-1-xl:mb-2">-<Rating-allowFraction-SVGclassName="inline-block"-emptyClassName="fill-gray-50-"-size={19}-readonly-/>-</div>-<div-className="flex-items-center-space-x-[5px]-ml-3-xl:space-x-2.5">-{data.rating.count->-0-?-(-<p-className="font-bold-mr-2-text-[19px]-text-black-rounded-sm-p-1">-${data.price}-</p>-)-:-(-<p-className="text-destructive-text-red-600">Out-of-Stock</p>-)}-</div>-</div>-</Link>-);-};-export-default-ProductCard;-in-this-code-to-add-rating-functionality