<script lang="ts" generics="T extends string">
	interface Props {
		tabs: T[];
		activeTab: T;
		onTabChange: (tab: T) => void;
	}

	let { tabs, activeTab = $bindable(), onTabChange }: Props = $props();
</script>

<div class="flex">
	{#each tabs as tab (tab)}
		{@const isActive = activeTab === tab}
		<button
			onclick={() => onTabChange(tab)}
			class="flex-1 border-t-3 px-4 py-3 font-semibold transition-colors hover:cursor-pointer {isActive
				? 'border-(--nucleus-accent) bg-(--nucleus-accent)/20 text-(--nucleus-accent)'
				: 'border-(--nucleus-accent)/20 bg-transparent text-(--nucleus-fg)/60 hover:bg-(--nucleus-accent)/10'}"
		>
			{tab}
		</button>
	{/each}
</div>
