"use client";

import Link from "next/link";
import { useRouter } from "next/navigation";
import { Breadcrumbs as MuBreadcrumbs, type Crumb } from "@unlocalhosted/metalui";
import { encodePath } from "@/lib/format";

/** Where a file or folder sits in the repository, as MetalUI's breadcrumbs; deep paths fold their middle into a menu. */
export function Breadcrumbs({ base, name, gitRef, path }: { base: string; name: string; gitRef: string; path: string }) {
  const router = useRouter();
  const parts = path.split("/").filter(Boolean);
  const root = `${base}/tree/${encodePath(gitRef)}`;
  const items: Crumb[] = [
    { id: root, label: name, href: root },
    ...parts.map((part, i) => {
      const href = `${root}/${encodePath(parts.slice(0, i + 1).join("/"))}`;
      return { id: href, label: part, href: i === parts.length - 1 ? undefined : href };
    }),
  ];
  return (
    <MuBreadcrumbs
      items={items}
      max={5}
      aria-label="File path"
      renderLink={(item, { children, ...props }) => (
        <Link href={item.href ?? root} {...props}>
          {children}
        </Link>
      )}
      onNavigate={(item) => item.href && router.push(item.href)}
      className="type-lead"
    />
  );
}