import { Link } from "@tanstack/react-router";

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">
      <Link
        to="/$owner/$repo/tree/$"
        params={{ owner, repo, _splat: gitRef }}
        className="font-medium text-accent-400 hover:underline"
      >
        {repo}
      </Link>
      {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-gray-600">/</span>
            {isLast ? (
              <span className="text-gray-100">{part}</span>
            ) : (
              <Link
                to="/$owner/$repo/tree/$"
                params={{ owner, repo, _splat: `${gitRef}/${prefix}` }}
                className="text-accent-400 hover:underline"
              >
                {part}
              </Link>
            )}
          </span>
        );
      })}
    </nav>
  );
}