<script lang="ts">
	import Separator from "#lib/components/ui/Separator.svelte";
	import RefChip from "#lib/components/repo/RefChip.svelte";
	import RepoCrumbs from "#lib/components/repo/RepoCrumbs.svelte";
	import type { TreeEntrySummary } from "#lib/components/repo/types.ts";
	import { plural } from "#lib/format.ts";

	interface Props {
		ownerHandle: string;
		repoName: string;
		ref: string;
		path: string;
		entries: TreeEntrySummary[];
	}

	let { ownerHandle, repoName, ref, path, entries }: Props = $props();

	const folders = $derived(
		entries.filter((entry) => entry.kind === "directory" || entry.kind === "submodule").length
	);
	const files = $derived(entries.length - folders);
</script>

<div class="mb-xs flex items-center justify-between gap-xs typography-paragraph-regular md:mb-md">
	<div class="flex min-w-0 items-center gap-sm">
		<RepoCrumbs {ownerHandle} {repoName} {ref} {path} />

		<div
			class="flex shrink-0 items-center gap-xs typography-paragraph-small whitespace-nowrap text-foreground-muted"
		>
			{#if folders > 0}
				<span>{folders} {plural(folders, "folder", "folders")}</span>
			{/if}
			{#if folders > 0 && files > 0}
				<Separator variant="dot" />
			{/if}
			{#if files > 0}
				<span>{files} {plural(files, "file", "files")}</span>
			{/if}
		</div>
	</div>

	<RefChip {ownerHandle} {repoName} {ref} class="hidden max-w-64 md:flex" />
</div>