<script lang="ts">
	import { cn } from '$lib/utils';

	type Tab = {
		label: string;
		badge?: number;
		active?: boolean;
	};

	let {
		tabs,
		onselect
	}: {
		tabs: Tab[];
		onselect?: (index: number) => void;
	} = $props();
</script>

<div class="page-tabs">
	{#each tabs as tab, index}
		<button
			class={cn('page-tab', tab.active && 'page-tab--active')}
			onclick={() => onselect?.(index)}
			type="button"
		>
			{tab.label}
			{#if tab.badge !== undefined}
				<span class="badge">{tab.badge}</span>
			{/if}
		</button>
	{/each}
</div>

<style>
	.page-tabs {
		display: flex;
		gap: var(--sp-1);
		margin-bottom: var(--section-gap, 24px);
	}

	.page-tab {
		padding: var(--sp-2) var(--sp-4);
		border-radius: var(--radius-sm, 8px);
		font-size: var(--text-base);
		font-weight: 500;
		color: var(--text-3);
		background: none;
		border: none;
		transition: all var(--transition, 180ms ease);
		cursor: pointer;
		font-family: var(--font);
		display: inline-flex;
		align-items: center;
	}

	.page-tab:hover {
		color: var(--text-1);
		background: var(--card-secondary);
	}

	.page-tab--active {
		color: var(--text-1);
		background: var(--card);
		box-shadow: var(--card-shadow-sm);
	}

	.badge {
		font-size: var(--text-xs);
		font-family: var(--mono);
		background: var(--accent-dim);
		color: var(--accent);
		padding: 1px 6px;
		border-radius: var(--radius-xs);
		margin-left: var(--sp-1.5);
	}
</style>
