import { TextLink } from "~/ui/TextLink";

export function Breadcrumbs({
  owner,
  repo,
  gitRef,
  path,
}: {
  owner: string;
  repo: string;
  gitRef: string;
  path: string;
}) {
  const parts = path.split("/").filter(Boolean);
  return (
    <nav aria-label="Path" className="flex min-w-0 flex-wrap items-center gap-1 font-mono text-sm">
      <TextLink to="/$owner/$repo/tree/$" params={{ owner, repo, _splat: gitRef }} className="font-medium">
        {repo}
      </TextLink>
      {parts.map((part, index) => {
        const isLast = index === parts.length - 1;
        const prefix = parts.slice(0, index + 1).join("/");
        return (
          <span key={prefix} className="flex items-center gap-1">
            <span className="text-kumo-inactive">/</span>
            {isLast ? (
              <span className="text-kumo-strong">{part}</span>
            ) : (
              <TextLink to="/$owner/$repo/tree/$" params={{ owner, repo, _splat: `${gitRef}/${prefix}` }}>
                {part}
              </TextLink>
            )}
          </span>
        );
      })}
    </nav>
  );
}