<script lang="ts">
	import SquareChartGantt from "$icon/square-chart-gantt";
	import BookMarked from "$icon/book-marked";
	import Star from "$icon/star";
	import LineSquiggle from "$icon/line-squiggle";
	import Shield from "$icon/shield";
	import Tabs, { type TabDef } from "$lib/components/ui/Tabs.svelte";
	import type { ProfileCounts } from "./types";

	interface Props {
		handle: string;
		active: string;
		counts: ProfileCounts;
	}

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

	const hrefFor = (id: string) => (id === "overview" ? `/${handle}` : `/${handle}?tab=${id}`);

	const tabs = $derived<TabDef[]>([
		{ id: "overview", label: "Overview", icon: SquareChartGantt, href: hrefFor("overview") },
		{
			id: "repos",
			label: "Repositories",
			icon: BookMarked,
			count: counts.repos,
			href: hrefFor("repos")
		},
		{ id: "starred", label: "Starred", icon: Star, count: counts.stars, href: hrefFor("starred") },
		{
			id: "strings",
			label: "Strings",
			icon: LineSquiggle,
			count: counts.strings,
			href: hrefFor("strings")
		},
		{ id: "vouches", label: "Vouches", icon: Shield, href: hrefFor("vouches") }
	]);
</script>

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