/**
 * ANNOTATED COPY — every line explained
 * Source: src/components/product/CustomizationSelector.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, ProductCustomization } from '@/types';
// Import project module (@/ alias = src/ folder in tsconfig)
import { CUT_COUNTS, CUTTING_STYLE_KEYS } from '@/lib/constants';
// Import project module (@/ alias = src/ folder in tsconfig)
import { updateMeatCustomization } from '@/lib/customization';
// Import project module (@/ alias = src/ folder in tsconfig)
import { cn } from '@/lib/utils';
// Lucide icons — lightweight SVG icon components
import { Scissors, Hash } 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 CustomizationSelectorProps {
  // Line 11: category: Category;
  category: Category;
  // Line 12: customization: ProductCustomization;
  customization: ProductCustomization;
  // Line 13: onChange: (customization: ProductCustomization) => void;
  onChange: (customization: ProductCustomization) => void;
// 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 CustomizationSelector({
  // Property or array item — trailing comma allowed in TypeScript
  category,
  // Property or array item — trailing comma allowed in TypeScript
  customization,
  // Property or array item — trailing comma allowed in TypeScript
  onChange,
// Closing brace — end of block (function, if, object, JSX)
}: CustomizationSelectorProps) {
  // Custom hook — returns t() translator and current locale
  const { t } = useTranslation();
// (blank line — separates logical blocks for readability)
  // Conditional branch — different behavior based on runtime value
  if (category === 'fish') {
    // Return JSX — describes UI tree React renders to the DOM
    return (
      // JSX element — HTML-like tag becomes React component in browser
      <div className="rounded-xl border border-brand-100 bg-brand-50/50 p-4">
        // JSX element — HTML-like tag becomes React component in browser
        <p className="text-sm text-brand-700">{t('product.fishNote')}</p>
      // JSX element — HTML-like tag becomes React component in browser
      </div>
    // Line 28: );
    );
  // Closing brace — end of block (function, if, object, JSX)
  }
// (blank line — separates logical blocks for readability)
  // Line 31: const meat = updateMeatCustomization(customization, categ...
  const meat = updateMeatCustomization(customization, category, {});
  // Line 32: const selectedCuts = meat.cuts;
  const selectedCuts = meat.cuts;
  // Line 33: const selectedStyle = meat.cuttingStyle;
  const selectedStyle = meat.cuttingStyle;
// (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
          <Hash className="h-4 w-4 text-brand-700" />
          // JSX element — HTML-like tag becomes React component in browser
          <h3 className="text-sm font-semibold text-brand-900">
            // Line 41: {t('product.howManyCuts')}
            {t('product.howManyCuts')}
          // JSX element — HTML-like tag becomes React component in browser
          </h3>
        // JSX element — HTML-like tag becomes React component in browser
        </div>
        // 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)
          {CUT_COUNTS.map((cuts) => (
            // JSX element — HTML-like tag becomes React component in browser
            <button
              // Line 47: key={cuts}
              key={cuts}
              // Line 48: type="button"
              type="button"
              // Click handler — runs when user clicks (must be client component)
              onClick={() =>
                // Line 50: onChange(updateMeatCustomization(customization, category,...
                onChange(updateMeatCustomization(customization, category, { cuts }))
              // Closing brace — end of block (function, if, object, JSX)
              }
              // Tailwind CSS utility classes — styling (colors, spacing, layout)
              className={cn(
                // Property or array item — trailing comma allowed in TypeScript
                'min-w-[3.5rem] rounded-lg border-2 px-4 py-2.5 text-sm font-semibold transition-all',
                // Line 54: selectedCuts === cuts
                selectedCuts === cuts
                  // Line 55: ? 'border-brand-700 bg-brand-700 text-white shadow-premium'
                  ? 'border-brand-700 bg-brand-700 text-white shadow-premium'
                  // Line 56: : 'border-gray-200 bg-white text-gray-700 hover:border-br...
                  : 'border-gray-200 bg-white text-gray-700 hover:border-brand-300 hover:bg-brand-50'
              // Line 57: )}
              )}
            // Line 58: >
            >
              // Line 59: {cuts}
              {cuts}
            // JSX element — HTML-like tag becomes React component in browser
            </button>
          // Line 61: ))}
          ))}
        // JSX element — HTML-like tag becomes React component in browser
        </div>
        // JSX element — HTML-like tag becomes React component in browser
        <p className="mt-2 text-xs text-gray-500">{t('product.howManyCutsHint')}</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
        <div className="mb-3 flex items-center gap-2">
          // JSX element — HTML-like tag becomes React component in browser
          <Scissors className="h-4 w-4 text-brand-700" />
          // JSX element — HTML-like tag becomes React component in browser
          <h3 className="text-sm font-semibold text-brand-900">
            // Line 70: {t('product.selectCutting')}
            {t('product.selectCutting')}
          // JSX element — HTML-like tag becomes React component in browser
          </h3>
        // JSX element — HTML-like tag becomes React component in browser
        </div>
        // JSX element — HTML-like tag becomes React component in browser
        <div className="grid grid-cols-1 gap-2 sm:grid-cols-2">
          // Array.map — transform each item (often render a list of components)
          {CUTTING_STYLE_KEYS.map((style) => (
            // JSX element — HTML-like tag becomes React component in browser
            <button
              // Line 76: key={style}
              key={style}
              // Line 77: type="button"
              type="button"
              // Click handler — runs when user clicks (must be client component)
              onClick={() =>
                // Line 79: onChange(
                onChange(
                  // Line 80: updateMeatCustomization(customization, category, { cuttin...
                  updateMeatCustomization(customization, category, { cuttingStyle: style })
                // Line 81: )
                )
              // Closing brace — end of block (function, if, object, JSX)
              }
              // Tailwind CSS utility classes — styling (colors, spacing, layout)
              className={cn(
                // Property or array item — trailing comma allowed in TypeScript
                'rounded-lg border-2 px-4 py-3 text-start text-sm font-medium transition-all',
                // Line 85: selectedStyle === style
                selectedStyle === style
                  // Line 86: ? 'border-brand-700 bg-brand-700 text-white shadow-premium'
                  ? 'border-brand-700 bg-brand-700 text-white shadow-premium'
                  // Line 87: : 'border-gray-200 bg-white text-gray-700 hover:border-br...
                  : 'border-gray-200 bg-white text-gray-700 hover:border-brand-300 hover:bg-brand-50'
              // Line 88: )}
              )}
            // Line 89: >
            >
              // Line 90: {t(`cutting.${style}`)}
              {t(`cutting.${style}`)}
            // JSX element — HTML-like tag becomes React component in browser
            </button>
          // Line 92: ))}
          ))}
        // JSX element — HTML-like tag becomes React component in browser
        </div>
        // JSX element — HTML-like tag becomes React component in browser
        <p className="mt-2 text-xs text-gray-500">
          // Line 95: {t('product.selectCuttingHint', {
          {t('product.selectCuttingHint', {
            // Property or array item — trailing comma allowed in TypeScript
            category: t(`categories.${category}.name`),
          // Closing brace — end of block (function, if, object, JSX)
          })}
        // 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>
  // Line 101: );
  );
// Closing brace — end of block (function, if, object, JSX)
}
