import { Network } from 'lucide-react';
import { useOffscaleServers } from './useOffscaleServers';
import { OFFSCALE_SECTIONS } from './shared';
import { useOffscaleSection } from './useOffscaleSection';

// Panel header for the right (headscale-view) panel. Shows the section and, crucially, which server it is
// acting on — with several registered, "delete this node" is only safe if the target is unambiguous.

export const OffscaleViewHeader = () => {
  const section = useOffscaleSection();
  const { active } = useOffscaleServers();
  const label = OFFSCALE_SECTIONS.find((s) => s.id === section)?.label ?? 'Headscale';

  return (
    <>
      <Network className="h-3.5 w-3.5 shrink-0" />
      <span className="flex-1 truncate text-xs font-medium">
        {label}
        {active && <span className="ml-1.5 font-normal text-black/50">· {active.name}</span>}
      </span>
    </>
  );
};