import { Breadcrumbs } from '#/components/molecules/breadcrumbs.jsx';

/**
 * Where the reader is in the repository, pinned at the top of the source
 * pane while what is under it scrolls: the way a forge keeps the path in
 * view down a long file. `actions` holds the right end, for a control the
 * rail carries on a wide window and the pane has to carry on a narrow one.
 *
 * The row is one height, 44 pixels, and whatever pins under it says so with
 * `top-11`.
 * @param {{repo: string, refName: string, path: string, actions?: import('react').ReactNode}} props
 */
export function SourceCrumbs({ repo, refName, path, actions }) {
  return (
    <div className="sticky top-0 z-20 flex h-11 items-center gap-3 bg-background">
      <div className="min-w-0 flex-1">
        <Breadcrumbs repo={repo} refName={refName} path={path} />
      </div>
      {actions && (
        <div className="flex shrink-0 items-center gap-2">{actions}</div>
      )}
    </div>
  );
}