import { GitBranch } from 'lucide-react';
import { useServiceConnection, useServiceHealth } from '../../hooks/useServiceConnection';
import { GITEA_SECTIONS } from './shared';
import { useGiteaLocation, useGiteaSection } from './useGiteaLocation';

// Panel header for the right (gitea-view) panel: which section, and which instance version it is talking to.

export const GiteaViewHeader = () => {
  const section = useGiteaSection();
  const { owner, repo } = useGiteaLocation();
  const { data } = useServiceConnection('gitea');
  const { data: health } = useServiceHealth('gitea');
  // Inside a repository there is no section segment to name, so the repository itself is the label.
  const label = owner && repo ? `${owner}/${repo}` : (GITEA_SECTIONS.find((s) => s.id === section)?.label ?? 'Gitea');
  const version = health?.version ?? data?.connection?.version ?? null;

  return (
    <>
      <GitBranch className="h-3.5 w-3.5 shrink-0" />
      <span className="flex-1 truncate text-xs font-medium">
        {label}
        {version && <span className="ml-1.5 font-normal text-muted-foreground">· {version}</span>}
      </span>
    </>
  );
};
