<script lang="ts">
	interface Tab {
		value: string;
		label: string;
		icon?: string;
	}

	interface Props {
		tabs: Tab[];
		active: string;
		onchange: (value: string) => void;
	}

	let { tabs, active, onchange }: Props = $props();
</script>

<div class="flex items-center gap-1 px-6 py-3 border-b border-light/5 shrink-0">
	{#each tabs as tab}
		<button
			type="button"
			class="flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-body-sm font-body transition-colors {active ===
			tab.value
				? 'bg-primary text-background'
				: 'text-light/50 hover:text-white hover:bg-dark/50'}"
			onclick={() => onchange(tab.value)}
		>
			{#if tab.icon}
				<span
					class="material-symbols-rounded"
					style="font-size: 16px; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 16;"
					>{tab.icon}</span
				>
			{/if}
			{tab.label}
		</button>
	{/each}
</div>
