// @design-system: layout/SettingsNav
/**
 * SettingsNav — left/right-rail anchor navigation for settings pages.
 *
 * Renders a vertical list of anchor links that scroll to in-page `<SettingsSection>` elements.
 * Stacked on mobile (horizontal chip row), vertical rail on lg+.
 *
 * Tokens: `--color-mode-vendor-*`, `--color-surface-raised`, `--color-border`,
 *          `--color-text-*`, `--color-surface-hover`
 */

'use client';

import { useT } from '@/lib/i18n/react';
import { cn } from '@/lib/cn';

export interface SettingsNavSection {
  /** Anchor ID (without #). Must match SettingsSection's `id` prop. */
  id: string;
  /** i18n label key from `settings_nav` namespace. */
  labelKey:
    | 'section_shop'
    | 'section_hours'
    | 'section_pickup'
    | 'section_returns'
    | 'section_payments'
    | 'section_notifications'
    | 'section_team'
    | 'route_general'
    | 'route_invoicing';
  /** When set, navigates to this path instead of an in-page hash anchor. */
  href?: string;
}

export interface SettingsNavProps {
  /** Sections to render as nav anchors. */
  sections: SettingsNavSection[];
  /** Currently active section ID (used for active highlight). */
  activeId?: string;
  /** Extra class names. */
  className?: string;
}

/**
 * SettingsNav
 *
 * Anchor-based section nav. Uses hash links (`href="#id"`).
 * Tokens: `--color-mode-vendor-50/700/800`, `--color-surface-hover`
 */
export function SettingsNav({ sections, activeId, className }: SettingsNavProps) {
  const t = useT('settings_nav');

  return (
    <nav
      aria-label={t('nav_label')}
      className={cn(
        'flex flex-row gap-1 lg:flex-col',
        'overflow-x-auto lg:overflow-x-visible',
        className,
      )}
    >
      {sections.map((section) => {
        const isActive = section.id === activeId;
        const href = section.href ?? `#${section.id}`;
        return (
          <a
            key={section.id}
            href={href}
            aria-current={isActive ? 'true' : undefined}
            className={cn(
              'rounded-md px-3 py-2 text-sm whitespace-nowrap transition-colors',
              'focus-visible:ring-mode-vendor-500 focus-visible:ring-2 focus-visible:outline-none',
              isActive
                ? 'bg-mode-vendor-50 text-mode-vendor-800 font-semibold'
                : 'text-text-secondary hover:bg-surface-hover hover:text-text-primary',
            )}
          >
            {t(section.labelKey)}
          </a>
        );
      })}
    </nav>
  );
}