import { NavLink } from 'react-router';
import { Cpu, Server, Boxes } from 'lucide-react';
import { SCOPES, monitorScopePath, type MonitorScope } from './shared';

// Left panel — a single-column list of scopes. Each is a react-router NavLink to /system-monitor/<scope>,
// so active state comes from the router and a scope can be linked, bookmarked and cmd-clicked.
const ICONS: Record<MonitorScope, typeof Cpu> = { btop: Cpu, pm2: Server, docker: Boxes };

export const ScopeList = ({ panelId: _panelId }: { panelId: string }) => (
  <div className="flex h-full flex-col overflow-y-auto p-3">
    {SCOPES.map((s) => {
      const Icon = ICONS[s.id];
      return (
        <NavLink
          key={s.id}
          to={monitorScopePath(s.id)}
          className={({ isActive }) =>
            `flex items-center gap-2 rounded-md px-2 py-1.5 text-left text-sm ${
              isActive ? 'bg-muted text-foreground' : 'text-muted-foreground hover:bg-muted/60 hover:text-foreground'
            }`
          }
        >
          <Icon size={15} className="shrink-0" />
          <span className="truncate">{s.label}</span>
        </NavLink>
      );
    })}
  </div>
);
