<script lang="ts">
	import OutlineIcon from '$lib/components/ui/OutlineIcon.svelte';
	import type { OutlineIconName } from '$lib/components/ui/OutlineIcon.svelte';

	interface Props {
		label: string;
		icon: OutlineIconName;
		active?: boolean;
		variant?: 'mobile' | 'desktop';
		onclick: () => void;
	}

	let { label, icon, active = false, variant = 'mobile', onclick }: Props = $props();
</script>

{#if variant === 'mobile'}
	<button
		type="button"
		class="tab flex shrink-0 items-center gap-1.5 {active ? 'tab-active bg-base-100' : ''}"
		{onclick}
	>
		<OutlineIcon name={icon} size="xs" />
		{label}
	</button>
{:else}
	<button
		type="button"
		class="btn btn-sm gap-1.5 rounded-full {active ? 'border-0 bg-violet-600 text-white' : 'btn-ghost'}"
		{onclick}
	>
		<OutlineIcon name={icon} size="xs" filled={active} />
		{label}
	</button>
{/if}
