/**
 * ANNOTATED COPY — every line explained
 * Source: src/components/layout/LocaleAttributes.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 { useEffect } from 'react';
// Import project module (@/ alias = src/ folder in tsconfig)
import { useLocaleStore } from '@/store/locale';
// Import project module (@/ alias = src/ folder in tsconfig)
import { getHtmlLang, isRtl } from '@/i18n';
// (blank line — separates logical blocks for readability)
// Default export — main component/page Next.js or other files import
export default function LocaleAttributes() {
  // Zustand selector — subscribe to slice of global store
  const locale = useLocaleStore((s) => s.locale);
// (blank line — separates logical blocks for readability)
  // Side effect hook — runs after paint; deps array controls when it re-runs
  useEffect(() => {
    // Line 11: document.documentElement.lang = getHtmlLang(locale);
    document.documentElement.lang = getHtmlLang(locale);
    // Line 12: document.documentElement.dir = isRtl(locale) ? 'rtl' : 'l...
    document.documentElement.dir = isRtl(locale) ? 'rtl' : 'ltr';
  // Closing brace — end of block (function, if, object, JSX)
  }, [locale]);
// (blank line — separates logical blocks for readability)
  // Return value from function
  return null;
// Closing brace — end of block (function, if, object, JSX)
}
