<script lang="ts">
	import RefChip from "./RefChip.svelte";
	import RepoCrumbs from "./RepoCrumbs.svelte";
	import type { TreeEntrySummary } from "./types";

	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);
	const plural = (count: number, noun: string) => `${count} ${noun}${count === 1 ? "" : "s"}`;
</script>

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

		<div class="flex items-center gap-2 text-foreground-muted">
			{#if folders > 0}
				<span>{plural(folders, "folder")}</span>
			{/if}
			{#if folders > 0 && files > 0}
				<span aria-hidden="true">&middot;</span>
			{/if}
			{#if files > 0}
				<span>{plural(files, "file")}</span>
			{/if}
		</div>
	</div>

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