// @design-system: a11y/SkipLink
/**
 * SkipLink - keyboard-accessible "skip to main content" link.
 *
 * Styled via the `.skip-link` class defined in globals.css.
 * Visible only on focus; first element in every AppShell.
 */

import { useSyncExternalStore } from 'react';
import { getT } from '@/lib/i18n';
import { usePrefsStore } from '@/lib/i18n/store';
import type { Locale } from '@/lib/i18n';

export function SkipLink({ initialLocale = 'he' }: { initialLocale?: Locale }) {
  // Track the prefs store directly so the rendered locale stays in sync
  // with rehydration + later toggles. SSR snapshot uses the prop so the
  // first client render matches the server output.
  const locale = useSyncExternalStore(
    usePrefsStore.subscribe,
    () => usePrefsStore.getState().locale,
    () => initialLocale,
  );

  const t = getT(locale, 'a11y');
  return (
    <a href="#main" className="skip-link">
      {t('skipToContent')}
    </a>
  );
}