import { RepositoryContextProvider } from "@/contexts";
import { RepoSidebar } from "@/components/repository/sidebar";
import { useHead } from "@/hooks/useHead";
import { Outlet, useParams } from "react-router-dom";

export const RepoLayout = () => {
  const { namespace, repoName } = useParams();

  useHead({
    title: namespace && repoName ? `${namespace}/${repoName}` : "Repository",
    noindex: true,
  });

  if (!namespace || !repoName) return null;

  return (
    <RepositoryContextProvider namespace={namespace} repoName={repoName}>
      <div className="flex h-screen w-full overflow-hidden bg-background">
        <aside className="flex-shrink-0 h-screen sticky top-0 overflow-auto border-r border-border">
          <RepoSidebar />
        </aside>
        <main className="flex-1 h-screen overflow-auto">
          <Outlet />
        </main>
      </div>
    </RepositoryContextProvider>
  );
};
