'use client';

import { SettingsNav } from '@/components/ui/layout/SettingsNav';
import type { SettingsNavSection } from '@/components/ui/layout/SettingsNav';

export type VendorSettingsRouteId = 'general' | 'payments' | 'notifications' | 'invoicing';

const ROUTE_SECTIONS: SettingsNavSection[] = [
  { id: 'general', labelKey: 'route_general', href: '/vendor/settings' },
  { id: 'payments', labelKey: 'section_payments', href: '/vendor/settings/payments' },
  {
    id: 'notifications',
    labelKey: 'section_notifications',
    href: '/vendor/settings/notifications',
  },
  { id: 'invoicing', labelKey: 'route_invoicing', href: '/vendor/settings/invoicing' },
];

export interface VendorSettingsRouteNavProps {
  activeId: VendorSettingsRouteId;
  className?: string;
}

/** Cross-page settings sub-nav (payments / notifications / invoicing islands). */
export function VendorSettingsRouteNav({ activeId, className }: VendorSettingsRouteNavProps) {
  return <SettingsNav sections={ROUTE_SECTIONS} activeId={activeId} className={className} />;
}