import React from 'react';

const NAV = [
  { id: 'overview',   label: 'Обзор',         ico: '◉' },
  { id: 'servers',    label: 'Серверы',       ico: '⋆' },
  { id: 'routing',    label: 'Маршрутизация', ico: '⇅' },
  { id: 'logs',       label: 'Логи',          ico: '≡' },
  { id: 'settings',   label: 'Настройки',     ico: '⚙' },
];

export function Sidebar({ active, onChange, badges = {}, mode = 'gateway' }) {
  const items = mode === 'client'
    ? NAV.filter((item) => item.id !== 'routing')
    : NAV;

  return (
    <nav className="sidebar">
      {items.map((item) => {
        const badge = badges[item.id];
        return (
          <button
            key={item.id}
            type="button"
            className={`sidebar-item${active === item.id ? ' active' : ''}`}
            onClick={() => onChange(item.id)}
          >
            <span className="ico">{item.ico}</span>
            {item.label}
            {badge && (
              <span className={`badge ${badge.kind || ''}`}>{badge.text}</span>
            )}
          </button>
        );
      })}
    </nav>
  );
}