<script lang="ts">
	import SquareChartGantt from "$icon/square-chart-gantt";
	import CircleDot from "$icon/circle-dot";
	import GitPullRequest from "$icon/git-pull-request";
	import Layers2 from "$icon/layers-2";
	import Settings from "$icon/settings";
	import Tabs, { type TabDef } from "$lib/components/ui/Tabs.svelte";
	import type { RepoCounts, RepoInfo } from "./types";

	interface Props {
		repo: RepoInfo;
		counts: RepoCounts;
		active: string;
	}

	let { repo, counts, active }: Props = $props();

	const base = $derived(`/${repo.ownerHandle}/${repo.name}`);

	const tabs = $derived<TabDef[]>([
		{ id: "overview", label: "Overview", icon: SquareChartGantt, href: base },
		{
			id: "issues",
			label: "Issues",
			icon: CircleDot,
			count: counts.issues,
			href: `${base}/issues`
		},
		{
			id: "pulls",
			label: "Pulls",
			icon: GitPullRequest,
			count: counts.pulls,
			href: `${base}/pulls`
		},
		{ id: "pipelines", label: "Pipelines", icon: Layers2, href: `${base}/pipelines` },
		// todo: only show this to collaborators — needs the viewer's push access on
		// RepoInfo, which the layout load doesn't resolve yet
		{ id: "settings", label: "Settings", icon: Settings, href: `${base}/settings` }
	]);
</script>

<Tabs overlapBottom={true} {tabs} {active} label="repository sections" />
