High-Performance Custom E-Commerce for 143 Fragrance

import Image from 'next/image';
import Link from 'next/link';

export default function ProductCard({ product }) {
  return (
    <div className="product-card bg-[#0a0a0f] border border-white/5 p-4 rounded-xl">
      <div className="relative w-full h-48 mb-4">
        {/* Next.js Image optimization with responsive sizes */}
        <Image
          src={product.imageSrc}
          alt={product.title}
          fill
          sizes="(max-width: 768px) 100vw, 33vw"
          priority={product.isFeatured}
          className="object-cover rounded-lg"
        />
      </div>
      <h3 className="text-sm font-bold text-white mb-2">{product.title}</h3>
      <p className="text-xs text-indigo-400 mb-4">{product.price}</p>
      
      {/* Prefetching the link for instant transitions */}
      <Link 
        href={`/products/${product.slug}`} 
        prefetch={true}
        className="btn-premium py-2 text-center text-xs block rounded-full"
      >
        View Product
      </Link>
    </div>
  );
}