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

import-React-from-"react";-import-{-FaStar,-FaStarHalf,-FaShoppingCart-}-from-"react-icons/fa";-import-{-useNavigate-}-from-"react-router-dom";-const-ProductCard-=-({-product-})-=>-{-const-navigate-=-useNavigate();-const-renderStars-=-(rating)-=>-{-const-stars-=-[];-const-fullStars-=-Math.floor(rating);-const-hasHalfStar-=-rating-%-1-!==-0;-for-(let-i-=-0;-i-<-fullStars;-i++)-{-stars.push(<FaStar-key={`star-${i}`}-className="text-yellow-400"-/>);-}-if-(hasHalfStar)-{-stars.push(<FaStarHalf-key="half-star"-className="text-yellow-400"-/>);-}-const-remainingStars-=-5---stars.length;-for-(let-i-=-0;-i-<-remainingStars;-i++)-{-stars.push(<FaStar-key={`empty-star-${i}`}-className="text-gray-300"-/>);-}-return-stars;-};-const-formatCurrency-=-(amount)-=>-{-return-`${amount.toString().replace(/\B(?=(\d{3})+(?!\d))/g,-".")}₫`;-};-const-primaryVariant-=-product.variants?.[0];-const-primaryImage-=-primaryVariant?.images?.[0]-||-"https://via.placeholder.com/150";-return-(-<div-className="max-w-xs-rounded-lg-overflow-hidden-shadow-md-hover:shadow-lg-transition-shadow-duration-300-bg-white">-<div-className="relative">-<img-src={primaryImage}-alt={product.name}-className="w-full-h-48-object-cover-cursor-pointer"-onError={(e)-=>-{-e.target.src-=-"https://via.placeholder.com/150";-}}-onClick={()-=>-navigate(`/product-details/${product._id}`)}-/>-<span-className="absolute-top-1-left-1-bg-red-600-text-white-px-3-py-1-rounded-full-text-sm-font-semibold">-{product.visibilityType}-</span>-<span-className="absolute-top-1-right-1-bg-green-600-text-white-px-3-py-1-rounded-full-text-sm-font-semibold">---{Math.round(-((product.pricing.original---product.pricing.current)-/-product.pricing.original)-*-100-)}-%-</span>-</div>-<div-className="p-4">-<div-className="text-sm-text-gray-600-font-medium-mb-1">-{product.brandId-||-"N/A"}-</div>-<h2-className="text-lg-font-bold-text-gray-800-mb-2-cursor-pointer-hover:underline-line-clamp-2"-onClick={()-=>-navigate(`/product-details/${product._id}`)}->-{product.name}-</h2>-<div-className="flex-items-center-mb-2">-<div-className="flex-items-center">-{renderStars(product.ratings.average)}-</div>-<span-className="ml-2-text-gray-600-text-sm">-({product.ratings.totalReviews}-đánh-giá)-</span>-</div>-<div-className="mb-2">-<span-className="bg-green-100-text-green-800-text-xs-font-medium-px-2.5-py-0.5-rounded-full-uppercase">-{primaryVariant?.condition-||-"N/A"}-</span>-{primaryVariant?.attributes?.[0]?.values?.[0]?.stock-<=-20-&&-(-<span-className="ml-2-text-red-600-text-sm">-Chỉ-còn-{primaryVariant.attributes[0].values[0].stock}-sản-phẩm!-</span>-)}-</div>-<div-className="flex-items-center-mb-4">-<span-className="text-lg-font-bold-text-gray-900">-{formatCurrency(product.pricing.current)}-</span>-{product.pricing.original->-product.pricing.current-&&-(-<>-<span-className="ml-2-text-gray-500-line-through-text-sm">-{formatCurrency(product.pricing.original)}-</span>-</>-)}-</div>-<button-className="w-full-bg-blue-600-hover:bg-blue-700-text-white-font-bold-py-2-px-4-rounded-lg-flex-items-center-justify-center-transition-colors-duration-300">-<FaShoppingCart-className="mr-2"-/>-Thêm-vào-giỏ-hàng-</button>-</div>-</div>-);-};-export-default-ProductCard;-I-want-from-the-Product-Card-above,-you-create-another-type-of-Product-Card-to-display-product-information-in-a-more-unique-and-special-way.