/**
 * ANNOTATED COPY — every line explained
 * Source: src/components/shop/ShopFilters.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 { Category, SortOption } from '@/types';
// Import project module (@/ alias = src/ folder in tsconfig)
import { cn } from '@/lib/utils';
// Lucide icons — lightweight SVG icon components
import { SlidersHorizontal } from 'lucide-react';
// Import project module (@/ alias = src/ folder in tsconfig)
import { useTranslation } from '@/hooks/useTranslation';
// (blank line — separates logical blocks for readability)
// TypeScript interface — contract for object properties and methods
interface ShopFiltersProps {
  // Line 9: selectedCategory: Category | 'all';
  selectedCategory: Category | 'all';
  // Line 10: onCategoryChange: (category: Category | 'all') => void;
  onCategoryChange: (category: Category | 'all') => void;
  // Line 11: sortBy: SortOption;
  sortBy: SortOption;
  // Line 12: onSortChange: (sort: SortOption) => void;
  onSortChange: (sort: SortOption) => void;
  // Line 13: searchQuery: string;
  searchQuery: string;
  // Line 14: onSearchChange: (query: string) => void;
  onSearchChange: (query: string) => void;
  // Line 15: totalResults: number;
  totalResults: number;
// 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 ShopFilters({
  // Property or array item — trailing comma allowed in TypeScript
  selectedCategory,
  // Property or array item — trailing comma allowed in TypeScript
  onCategoryChange,
  // Property or array item — trailing comma allowed in TypeScript
  sortBy,
  // Property or array item — trailing comma allowed in TypeScript
  onSortChange,
  // Property or array item — trailing comma allowed in TypeScript
  searchQuery,
  // Property or array item — trailing comma allowed in TypeScript
  onSearchChange,
  // Property or array item — trailing comma allowed in TypeScript
  totalResults,
// Closing brace — end of block (function, if, object, JSX)
}: ShopFiltersProps) {
  // Custom hook — returns t() translator and current locale
  const { t } = useTranslation();
// (blank line — separates logical blocks for readability)
  // Line 29: const categories: { value: Category | 'all'; label: strin...
  const categories: { value: Category | 'all'; label: string }[] = [
    // Property or array item — trailing comma allowed in TypeScript
    { value: 'all', label: t('shop.all') },
    // Property or array item — trailing comma allowed in TypeScript
    { value: 'chicken', label: t('nav.chicken') },
    // Property or array item — trailing comma allowed in TypeScript
    { value: 'beef', label: t('nav.beef') },
    // Property or array item — trailing comma allowed in TypeScript
    { value: 'lamb', label: t('nav.lamb') },
    // Property or array item — trailing comma allowed in TypeScript
    { value: 'fish', label: t('nav.fish') },
  // End of array literal
  ];
// (blank line — separates logical blocks for readability)
  // Line 37: const sortOptions: { value: SortOption; label: string }[]...
  const sortOptions: { value: SortOption; label: string }[] = [
    // Property or array item — trailing comma allowed in TypeScript
    { value: 'featured', label: t('shop.sortFeatured') },
    // Property or array item — trailing comma allowed in TypeScript
    { value: 'price-asc', label: t('shop.sortPriceAsc') },
    // Property or array item — trailing comma allowed in TypeScript
    { value: 'price-desc', label: t('shop.sortPriceDesc') },
    // Property or array item — trailing comma allowed in TypeScript
    { value: 'name', label: t('shop.sortName') },
  // End of array literal
  ];
// (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="space-y-6">
      // JSX element — HTML-like tag becomes React component in browser
      <div>
        // JSX element — HTML-like tag becomes React component in browser
        <div className="mb-3 flex items-center gap-2">
          // JSX element — HTML-like tag becomes React component in browser
          <SlidersHorizontal className="h-4 w-4 text-brand-700" />
          // JSX element — HTML-like tag becomes React component in browser
          <h2 className="text-sm font-semibold text-brand-900">{t('shop.filters')}</h2>
        // JSX element — HTML-like tag becomes React component in browser
        </div>
        // JSX element — HTML-like tag becomes React component in browser
        <p className="text-xs text-gray-500">
          // Line 52: {t('shop.productsFound', { count: totalResults })}
          {t('shop.productsFound', { count: totalResults })}
        // JSX element — HTML-like tag becomes React component in browser
        </p>
      // 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>
        // JSX element — HTML-like tag becomes React component in browser
        <label htmlFor="search" className="label-text">
          // Line 58: {t('shop.search')}
          {t('shop.search')}
        // JSX element — HTML-like tag becomes React component in browser
        </label>
        // JSX element — HTML-like tag becomes React component in browser
        <input
          // Line 61: id="search"
          id="search"
          // Line 62: type="text"
          type="text"
          // Line 63: placeholder={t('shop.searchPlaceholder')}
          placeholder={t('shop.searchPlaceholder')}
          // Line 64: value={searchQuery}
          value={searchQuery}
          // Change handler — runs when input/select value changes
          onChange={(e) => onSearchChange(e.target.value)}
          // Tailwind CSS utility classes — styling (colors, spacing, layout)
          className="input-field"
        // Line 67: />
        />
      // 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>
        // JSX element — HTML-like tag becomes React component in browser
        <p className="label-text">{t('shop.category')}</p>
        // JSX element — HTML-like tag becomes React component in browser
        <div className="flex flex-wrap gap-2">
          // Array.map — transform each item (often render a list of components)
          {categories.map((cat) => (
            // JSX element — HTML-like tag becomes React component in browser
            <button
              // Line 75: key={cat.value}
              key={cat.value}
              // Click handler — runs when user clicks (must be client component)
              onClick={() => onCategoryChange(cat.value)}
              // Tailwind CSS utility classes — styling (colors, spacing, layout)
              className={cn(
                // Property or array item — trailing comma allowed in TypeScript
                'rounded-full px-4 py-2 text-sm font-medium transition-all',
                // Line 79: selectedCategory === cat.value
                selectedCategory === cat.value
                  // Line 80: ? 'bg-brand-700 text-white shadow-premium'
                  ? 'bg-brand-700 text-white shadow-premium'
                  // Line 81: : 'bg-gray-100 text-gray-600 hover:bg-brand-50 hover:text...
                  : 'bg-gray-100 text-gray-600 hover:bg-brand-50 hover:text-brand-700'
              // Line 82: )}
              )}
            // Line 83: >
            >
              // Line 84: {cat.label}
              {cat.label}
            // JSX element — HTML-like tag becomes React component in browser
            </button>
          // Line 86: ))}
          ))}
        // 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>
        // JSX element — HTML-like tag becomes React component in browser
        <label htmlFor="sort" className="label-text">
          // Line 92: {t('shop.sortBy')}
          {t('shop.sortBy')}
        // JSX element — HTML-like tag becomes React component in browser
        </label>
        // JSX element — HTML-like tag becomes React component in browser
        <select
          // Line 95: id="sort"
          id="sort"
          // Line 96: value={sortBy}
          value={sortBy}
          // Change handler — runs when input/select value changes
          onChange={(e) => onSortChange(e.target.value as SortOption)}
          // Tailwind CSS utility classes — styling (colors, spacing, layout)
          className="input-field"
        // Line 99: >
        >
          // Array.map — transform each item (often render a list of components)
          {sortOptions.map((opt) => (
            // JSX element — HTML-like tag becomes React component in browser
            <option key={opt.value} value={opt.value}>
              // Line 102: {opt.label}
              {opt.label}
            // JSX element — HTML-like tag becomes React component in browser
            </option>
          // Line 104: ))}
          ))}
        // JSX element — HTML-like tag becomes React component in browser
        </select>
      // JSX element — HTML-like tag becomes React component in browser
      </div>
    // JSX element — HTML-like tag becomes React component in browser
    </div>
  // Line 108: );
  );
// Closing brace — end of block (function, if, object, JSX)
}
