/**
 * ANNOTATED COPY — every line explained
 * Source: src/components/layout/LanguageSwitcher.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 React — core UI library (components, hooks, JSX)
import { useState, useRef, useEffect } from 'react';
// Lucide icons — lightweight SVG icon components
import { Globe, Check } from 'lucide-react';
// Import project module (@/ alias = src/ folder in tsconfig)
import { LOCALES, Locale } from '@/i18n/types';
// Import project module (@/ alias = src/ folder in tsconfig)
import { useLocaleStore } from '@/store/locale';
// 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';
// (blank line — separates logical blocks for readability)
// Default export — main component/page Next.js or other files import
export default function LanguageSwitcher() {
  // React useState — local component state that triggers re-render on change
  const [open, setOpen] = useState(false);
  // Line 12: const ref = useRef<HTMLDivElement>(null);
  const ref = useRef<HTMLDivElement>(null);
  // Zustand selector — subscribe to slice of global store
  const { locale, setLocale } = useLocaleStore();
  // Custom hook — returns t() translator and current locale
  const { t } = useTranslation();
// (blank line — separates logical blocks for readability)
  // Array.find — get first matching item or undefined
  const current = LOCALES.find((l) => l.code === locale);
// (blank line — separates logical blocks for readability)
  // Side effect hook — runs after paint; deps array controls when it re-runs
  useEffect(() => {
    // Function declaration — reusable logic in this file
    function handleClick(e: MouseEvent) {
      // Conditional branch — different behavior based on runtime value
      if (ref.current && !ref.current.contains(e.target as Node)) {
        // Line 21: setOpen(false);
        setOpen(false);
      // Closing brace — end of block (function, if, object, JSX)
      }
    // Closing brace — end of block (function, if, object, JSX)
    }
    // Line 24: document.addEventListener('mousedown', handleClick);
    document.addEventListener('mousedown', handleClick);
    // Return JSX — describes UI tree React renders to the DOM
    return () => document.removeEventListener('mousedown', handleClick);
  // Closing brace — end of block (function, if, object, JSX)
  }, []);
// (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 ref={ref} className="relative">
      // JSX element — HTML-like tag becomes React component in browser
      <button
        // Click handler — runs when user clicks (must be client component)
        onClick={() => setOpen(!open)}
        // Tailwind CSS utility classes — styling (colors, spacing, layout)
        className="flex items-center gap-1.5 rounded-lg px-2 py-2 text-sm font-medium text-gray-600 transition-colors hover:bg-gray-100 hover:text-brand-700"
        // Accessibility attribute — screen readers and assistive tech
        aria-label={t('nav.language')}
      // Line 34: >
      >
        // JSX element — HTML-like tag becomes React component in browser
        <Globe className="h-4 w-4" />
        // JSX element — HTML-like tag becomes React component in browser
        <span className="hidden sm:inline">{current?.nativeLabel}</span>
      // JSX element — HTML-like tag becomes React component in browser
      </button>
// (blank line — separates logical blocks for readability)
      // Line 39: {open && (
      {open && (
        // JSX element — HTML-like tag becomes React component in browser
        <div className="absolute end-0 top-full z-50 mt-1 min-w-[10rem] overflow-hidden rounded-xl border border-gray-100 bg-white py-1 shadow-premium-lg">
          // Array.map — transform each item (often render a list of components)
          {LOCALES.map((lang) => (
            // JSX element — HTML-like tag becomes React component in browser
            <button
              // Line 43: key={lang.code}
              key={lang.code}
              // Click handler — runs when user clicks (must be client component)
              onClick={() => {
                // Line 45: setLocale(lang.code as Locale);
                setLocale(lang.code as Locale);
                // Line 46: setOpen(false);
                setOpen(false);
              // 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
                'flex w-full items-center justify-between gap-3 px-4 py-2.5 text-sm transition-colors hover:bg-brand-50',
                // Line 50: locale === lang.code
                locale === lang.code
                  // Line 51: ? 'font-semibold text-brand-700'
                  ? 'font-semibold text-brand-700'
                  // Line 52: : 'text-gray-600'
                  : 'text-gray-600'
              // Line 53: )}
              )}
            // Line 54: >
            >
              // JSX element — HTML-like tag becomes React component in browser
              <span>
                // Line 56: {lang.nativeLabel}
                {lang.nativeLabel}
                // JSX element — HTML-like tag becomes React component in browser
                <span className="ms-2 text-xs text-gray-400">{lang.label}</span>
              // JSX element — HTML-like tag becomes React component in browser
              </span>
              // Line 59: {locale === lang.code && (
              {locale === lang.code && (
                // JSX element — HTML-like tag becomes React component in browser
                <Check className="h-4 w-4 shrink-0 text-brand-700" />
              // Line 61: )}
              )}
            // JSX element — HTML-like tag becomes React component in browser
            </button>
          // Line 63: ))}
          ))}
        // JSX element — HTML-like tag becomes React component in browser
        </div>
      // Line 65: )}
      )}
    // JSX element — HTML-like tag becomes React component in browser
    </div>
  // Line 67: );
  );
// Closing brace — end of block (function, if, object, JSX)
}
