<script lang="ts">
	import Icon from '@iconify/svelte';

	let { currentTab = $bindable('appearence') } = $props();
</script>

{#snippet button(tab: string, label: string, icon: string)}
	<button
		onclick={() => (currentTab = tab)}
		class="flex items-center gap-3 px-3 py-2 rounded-lg transition-colors w-full text-left {currentTab ===
		tab
			? 'bg-primary text-primary-content'
			: 'hover:bg-base-300 text-base-content/70'}"
	>
		<Icon {icon} class="w-5 h-5" />
		<span class="font-medium">{label}</span>
	</button>
{/snippet}

<div class="lg:col-span-3">
	<div class="bg-base-200 rounded-xl p-4 sticky top-24">
		<nav class="space-y-2">
			{@render button('appearance', 'Appearance', 'mdi:palette')}
			{@render button('accessibility', 'Accessibility', 'mdi:eye')}
			{@render button('system', 'System', 'mdi:settings')}
			{@render button('about', 'About', 'mdi:information')}
		</nav>
	</div>
</div>
