<script lang="ts">
	import { resolve } from '$app/paths';
	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 type { Component } from 'svelte';
	import type { SvelteHTMLElements } from 'svelte/elements';
	import type { ProfileCounts } from './types';

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

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

	interface TabDef {
		id: string;
		label: string;
		icon: Component<SvelteHTMLElements['svg']>;
		count?: number;
	}

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

	const hrefFor = (id: string) =>
		resolve((id === 'overview' ? `/${handle}` : `/${handle}?tab=${id}`) as '/');
</script>

<nav class="w-full overflow-x-auto overflow-y-hidden pl-4" aria-label="profile sections">
	<div class="flex">
		{#each tabs as tab (tab.id)}
			{@const isActive = active === tab.id}
			{@const Glyph = tab.icon}
			<a
				href={hrefFor(tab.id)}
				class="group relative -mr-px no-underline hover:no-underline"
				aria-current={isActive ? 'page' : undefined}
			>
				<div
					class={`relative mr-1 min-w-[80px] rounded-t px-4 py-1 text-center whitespace-nowrap text-fg-strong ${
						isActive ? '-mb-px bg-surface font-medium' : 'group-hover:bg-surface-muted/25'
					}`}
				>
					<span class="flex items-center justify-center">
						<Glyph class="mr-2 h-4 w-4" aria-hidden="true" />
						{tab.label}
						{#if tab.count}
							<span class="ml-1 rounded bg-surface-muted px-1 text-sm">{tab.count}</span>
						{/if}
					</span>
				</div>
			</a>
		{/each}
	</div>
</nav>
