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

// Left panel — a single-column list of scopes; selecting one drives the right panel via the channel.
const ICONS: Record<MonitorScope, typeof Cpu> = { btop: Cpu, pm2: Server, docker: Boxes };

export const ScopeList = ({ panelId: _panelId }: { panelId: string }) => {
  const [scope, setScope] = useMonitorScope();
  return (
    <div className="flex h-full flex-col overflow-y-auto p-3">
      {SCOPES.map((s) => {
        const Icon = ICONS[s.id];
        return (
          <button
            key={s.id}
            type="button"
            onClick={() => setScope(s.id)}
            className={`flex items-center gap-2 rounded-md px-2 py-1.5 text-left text-sm ${
              scope === s.id ? '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>
          </button>
        );
      })}
    </div>
  );
};
