import { Network } from 'lucide-react';
import { useHeadscaleServers } from './useHeadscaleServers';
import { HEADSCALE_SECTIONS } from './shared';
import { useHeadscaleSection } from './useHeadscaleSection';

// 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 HeadscaleViewHeader = () => {
  const section = useHeadscaleSection();
  const { active } = useHeadscaleServers();
  const label = HEADSCALE_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>
    </>
  );
};