import React from 'react';
import { cn } from '../../../utils/classNames';
import { SettingsSection } from '../../../utils/appRoute';
import { SECTION_ICONS, SECTION_LABELS } from './settingsConfig';

interface SettingsSectionNavProps {
  sections: SettingsSection[];
  activeSection: SettingsSection;
  onSelect: (section: SettingsSection) => void;
}

const SettingsSectionNav: React.FC<SettingsSectionNavProps> = ({
  sections,
  activeSection,
  onSelect,
}) => (
  <nav className="flex shrink-0 gap-1 overflow-x-auto pb-1 sm:w-48 sm:flex-col sm:gap-0.5 sm:overflow-visible sm:border-r sm:border-app-border sm:pb-0 sm:pr-3">
    {sections.map(section => {
      const Icon = SECTION_ICONS[section];
      const active = section === activeSection;
      return (
        <button
          key={section}
          type="button"
          onClick={() => onSelect(section)}
          className={cn(
            'flex items-center gap-2.5 whitespace-nowrap rounded-md px-3 py-2 text-sm font-medium transition-colors',
            active
              ? 'bg-brand-subtle text-brand-text'
              : 'text-app-muted hover:bg-app-surface-hover hover:text-app-text',
          )}
        >
          <Icon size={16} />
          {SECTION_LABELS[section]}
        </button>
      );
    })}
  </nav>
);

export default SettingsSectionNav;