import { useHeadscaleSection } from './useHeadscaleSection';
import { ServersView } from './ServersView';
import { NodesView } from './NodesView';
import { UsersView } from './UsersView';
import { KeysView } from './KeysView';
import { InvitesView } from './InvitesView';
import { PolicyView } from './PolicyView';
import { DiagnosticsView } from './DiagnosticsView';
import { ConsoleView } from './ConsoleView';

// Right panel of the /headscale workspace — renders the section named by the URL.
//
// Every section except `servers` acts on whichever server is active; each handles the "none selected" case
// itself through ViewShell, so there is no gating to do here.

export const HeadscaleView = () => {
  const section = useHeadscaleSection();

  switch (section) {
    case 'nodes':
      return <NodesView />;
    case 'users':
      return <UsersView />;
    case 'keys':
      return <KeysView />;
    case 'invites':
      return <InvitesView />;
    case 'policy':
      return <PolicyView />;
    case 'diagnostics':
      return <DiagnosticsView />;
    case 'console':
      return <ConsoleView />;
    default:
      return <ServersView />;
  }
};