/**
 * ANNOTATED COPY — every line explained
 * Source: src/components/product/ProductCard.tsx
 * NOT used by the app — read this to learn how the real file works
 */
// Next.js: this file runs in the BROWSER (needs useState, onClick, localStorage, etc.)
'use client';
// (blank line — separates logical blocks for readability)
// Import project module (@/ alias = src/ folder in tsconfig)
import AppImage from '@/components/ui/AppImage';
// Next.js Link — fast client-side navigation without full page reload
import Link from 'next/link';
// Lucide icons — lightweight SVG icon components
import { Heart, ShoppingCart } from 'lucide-react';
// Import project module (@/ alias = src/ folder in tsconfig)
import { LocalizedProduct } from '@/lib/product-i18n';
// Import project module (@/ alias = src/ folder in tsconfig)
import { formatPrice, getFormatLocale } from '@/lib/utils';
// Import project module (@/ alias = src/ folder in tsconfig)
import { useWishlistStore } from '@/store/wishlist';
// Import project module (@/ alias = src/ folder in tsconfig)
import { useTranslation } from '@/hooks/useTranslation';
// Import project module (@/ alias = src/ folder in tsconfig)
import { cn } from '@/lib/utils';
// Import project module (@/ alias = src/ folder in tsconfig)
import { products } from '@/lib/products';
// (blank line — separates logical blocks for readability)
// TypeScript interface — contract for object properties and methods
interface ProductCardProps {
  // Line 14: product: LocalizedProduct;
  product: LocalizedProduct;
// Closing brace — end of block (function, if, object, JSX)
}
// (blank line — separates logical blocks for readability)
// Default export — main component/page Next.js or other files import
export default function ProductCard({ product }: ProductCardProps) {
  // Zustand selector — subscribe to slice of global store
  const { isInWishlist, toggleItem } = useWishlistStore();
  // Custom hook — returns t() translator and current locale
  const { t, locale } = useTranslation();
  // Array.find — get first matching item or undefined
  const rawProduct = products.find((p) => p.id === product.id)!;
  // Line 21: const inWishlist = isInWishlist(product.id);
  const inWishlist = isInWishlist(product.id);
// (blank line — separates logical blocks for readability)
  // Return JSX — describes UI tree React renders to the DOM
  return (
    // JSX element — HTML-like tag becomes React component in browser
    <div className="card-premium group overflow-hidden">
      // JSX element — HTML-like tag becomes React component in browser
      <div className="relative aspect-[4/3] overflow-hidden bg-gray-50">
        // JSX element — HTML-like tag becomes React component in browser
        <Link href={`/product/${product.slug}`}>
          // JSX element — HTML-like tag becomes React component in browser
          <AppImage
            // Line 28: src={product.image}
            src={product.image}
            // Line 29: alt={product.name}
            alt={product.name}
            // Line 30: fill
            fill
            // Tailwind CSS utility classes — styling (colors, spacing, layout)
            className="object-cover transition-transform duration-500 group-hover:scale-105"
            // Line 32: sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw...
            sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 320px"
          // Line 33: />
          />
        // JSX element — HTML-like tag becomes React component in browser
        </Link>
        // Line 35: {product.badge && (
        {product.badge && (
          // JSX element — HTML-like tag becomes React component in browser
          <span className="absolute start-3 top-3 rounded-full bg-gold-500 px-3 py-1 text-xs font-semibold text-white shadow-gold">
            // Line 37: {product.badge}
            {product.badge}
          // JSX element — HTML-like tag becomes React component in browser
          </span>
        // Line 39: )}
        )}
        // JSX element — HTML-like tag becomes React component in browser
        <button
          // Click handler — runs when user clicks (must be client component)
          onClick={() => toggleItem(rawProduct)}
          // Tailwind CSS utility classes — styling (colors, spacing, layout)
          className={cn(
            // Property or array item — trailing comma allowed in TypeScript
            'absolute end-3 top-3 flex h-9 w-9 items-center justify-center rounded-full bg-white/90 shadow-sm backdrop-blur transition-all hover:scale-110',
            // Line 44: inWishlist && 'text-red-500'
            inWishlist && 'text-red-500'
          // Line 45: )}
          )}
          // Accessibility attribute — screen readers and assistive tech
          aria-label={inWishlist ? t('product.removeWishlist') : t('product.addWishlist')}
        // Line 47: >
        >
          // JSX element — HTML-like tag becomes React component in browser
          <Heart className={cn('h-4 w-4', inWishlist && 'fill-current')} />
        // JSX element — HTML-like tag becomes React component in browser
        </button>
      // JSX element — HTML-like tag becomes React component in browser
      </div>
// (blank line — separates logical blocks for readability)
      // JSX element — HTML-like tag becomes React component in browser
      <div className="p-5">
        // JSX element — HTML-like tag becomes React component in browser
        <div className="mb-1 flex items-center gap-2">
          // JSX element — HTML-like tag becomes React component in browser
          <span className="text-xs font-medium uppercase tracking-wider text-brand-600">
            // Line 55: {t(`categories.${product.category}.name`)}
            {t(`categories.${product.category}.name`)}
          // JSX element — HTML-like tag becomes React component in browser
          </span>
          // Line 57: {product.weight && (
          {product.weight && (
            // JSX element — HTML-like tag becomes React component in browser
            <span className="text-xs text-gray-400">· {product.weight}</span>
          // Line 59: )}
          )}
        // JSX element — HTML-like tag becomes React component in browser
        </div>
// (blank line — separates logical blocks for readability)
        // JSX element — HTML-like tag becomes React component in browser
        <Link href={`/product/${product.slug}`}>
          // JSX element — HTML-like tag becomes React component in browser
          <h3 className="mb-1 font-display text-lg font-semibold text-brand-900 transition-colors group-hover:text-brand-700">
            // Line 64: {product.name}
            {product.name}
          // JSX element — HTML-like tag becomes React component in browser
          </h3>
        // JSX element — HTML-like tag becomes React component in browser
        </Link>
// (blank line — separates logical blocks for readability)
        // JSX element — HTML-like tag becomes React component in browser
        <p className="mb-4 line-clamp-2 text-sm text-gray-500">{product.description}</p>
// (blank line — separates logical blocks for readability)
        // JSX element — HTML-like tag becomes React component in browser
        <div className="flex items-center justify-between">
          // JSX element — HTML-like tag becomes React component in browser
          <div>
            // JSX element — HTML-like tag becomes React component in browser
            <span className="text-lg font-bold text-brand-800">
              // Line 73: {formatPrice(product.price, getFormatLocale(locale))}
              {formatPrice(product.price, getFormatLocale(locale))}
            // JSX element — HTML-like tag becomes React component in browser
            </span>
            // JSX element — HTML-like tag becomes React component in browser
            <span className="ms-1 text-xs text-gray-400">{product.priceUnit}</span>
          // JSX element — HTML-like tag becomes React component in browser
          </div>
// (blank line — separates logical blocks for readability)
          // JSX element — HTML-like tag becomes React component in browser
          <Link
            // Link target URL — internal route or external https://
            href={`/product/${product.slug}`}
            // Tailwind CSS utility classes — styling (colors, spacing, layout)
            className="flex h-10 w-10 items-center justify-center rounded-full bg-brand-700 text-white transition-all hover:bg-brand-800 hover:shadow-premium"
            // Accessibility attribute — screen readers and assistive tech
            aria-label={t('product.viewProduct', { name: product.name })}
          // Line 82: >
          >
            // JSX element — HTML-like tag becomes React component in browser
            <ShoppingCart className="h-4 w-4" />
          // JSX element — HTML-like tag becomes React component in browser
          </Link>
        // JSX element — HTML-like tag becomes React component in browser
        </div>
      // JSX element — HTML-like tag becomes React component in browser
      </div>
    // JSX element — HTML-like tag becomes React component in browser
    </div>
  // Line 88: );
  );
// Closing brace — end of block (function, if, object, JSX)
}
