/**
 * ANNOTATED COPY — every line explained
 * Source: src/app/wishlist/page.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)
// Next.js Link — fast client-side navigation without full page reload
import Link from 'next/link';
// Lucide icons — lightweight SVG icon components
import { Heart } from 'lucide-react';
// Import project module (@/ alias = src/ folder in tsconfig)
import ProductCard from '@/components/product/ProductCard';
// Import project module (@/ alias = src/ folder in tsconfig)
import Button from '@/components/ui/Button';
// 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 { localizeProduct } from '@/lib/product-i18n';
// (blank line — separates logical blocks for readability)
// Default export — main component/page Next.js or other files import
export default function WishlistPage() {
  // Zustand selector — subscribe to slice of global store
  const items = useWishlistStore((s) => s.items);
  // Custom hook — returns t() translator and current locale
  const { t } = useTranslation();
  // Array.map — transform each item (often render a list of components)
  const localizedItems = items.map((p) => localizeProduct(p, t));
// (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="bg-gray-50">
      // JSX element — HTML-like tag becomes React component in browser
      <div className="border-b border-gray-100 bg-white">
        // JSX element — HTML-like tag becomes React component in browser
        <div className="mx-auto max-w-7xl px-4 py-12 sm:px-6 lg:px-8">
          // JSX element — HTML-like tag becomes React component in browser
          <h1 className="section-heading">{t('wishlist.title')}</h1>
          // JSX element — HTML-like tag becomes React component in browser
          <p className="text-gray-500">
            // Line 22: {t('wishlist.saved', { count: items.length })}
            {t('wishlist.saved', { count: items.length })}
          // JSX element — HTML-like tag becomes React component in browser
          </p>
        // JSX element — HTML-like tag becomes React component in browser
        </div>
      // 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="mx-auto max-w-7xl px-4 py-10 sm:px-6 lg:px-8">
        // Line 28: {items.length === 0 ? (
        {items.length === 0 ? (
          // JSX element — HTML-like tag becomes React component in browser
          <div className="card-premium flex flex-col items-center justify-center p-16 text-center">
            // JSX element — HTML-like tag becomes React component in browser
            <div className="mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-red-50">
              // JSX element — HTML-like tag becomes React component in browser
              <Heart className="h-8 w-8 text-red-300" />
            // JSX element — HTML-like tag becomes React component in browser
            </div>
            // JSX element — HTML-like tag becomes React component in browser
            <h2 className="mb-2 text-lg font-semibold text-brand-900">
              // Line 34: {t('wishlist.empty')}
              {t('wishlist.empty')}
            // JSX element — HTML-like tag becomes React component in browser
            </h2>
            // JSX element — HTML-like tag becomes React component in browser
            <p className="mb-6 text-sm text-gray-500">{t('wishlist.emptyHint')}</p>
            // JSX element — HTML-like tag becomes React component in browser
            <Link href="/shop">
              // JSX element — HTML-like tag becomes React component in browser
              <Button>{t('wishlist.browse')}</Button>
            // JSX element — HTML-like tag becomes React component in browser
            </Link>
          // JSX element — HTML-like tag becomes React component in browser
          </div>
        // Line 41: ) : (
        ) : (
          // JSX element — HTML-like tag becomes React component in browser
          <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
            // Array.map — transform each item (often render a list of components)
            {localizedItems.map((product) => (
              // JSX element — HTML-like tag becomes React component in browser
              <ProductCard key={product.id} product={product} />
            // Line 45: ))}
            ))}
          // JSX element — HTML-like tag becomes React component in browser
          </div>
        // Line 47: )}
        )}
      // JSX element — HTML-like tag becomes React component in browser
      </div>
    // JSX element — HTML-like tag becomes React component in browser
    </div>
  // Line 50: );
  );
// Closing brace — end of block (function, if, object, JSX)
}
