<script lang="ts">
	import { page } from '$app/state';
	import type { Snippet } from 'svelte';

	const variants = {
		primary:
			'px-4 py-2 text-sm font-medium text-white bg-emerald-800 hover:bg-emerald-900 rounded-xl transition-all duration-200 ease-in-out disabled:opacity-70 disabled:cursor-not-allowed',
		secondary:
			'px-4 py-2 text-sm font-medium text-gray-100 bg-gray-600 border border-gray-300 hover:bg-gray-500 rounded-xl transition-all duration-200 ease-in-out',
		danger:
			'px-4 py-2 text-sm font-medium text-white bg-red-800 hover:bg-red-900 rounded-xl transition-all duration-200 ease-in-out disabled:opacity-70 disabled:cursor-not-allowed'
	};

	type Props = {
		children: Snippet;
		onClick?: (e: MouseEvent) => void;
		disabled?: boolean;
		variant?: keyof typeof variants;
		href?: string;
	};
	let { children, onClick, disabled, variant = 'primary', href }: Props = $props();

	const isActive = page.params.year === href?.split('/').pop();
	$inspect(isActive, 'isActive', page.params.year, href);
</script>

{#if href}
	<a {href} class={variants[variant]} class:!bg-gray-900={isActive}>
		{@render children()}
	</a>
{:else}
	<button style:cursor="pointer" class={variants[variant]} onclick={onClick} {disabled}>
		{@render children()}
	</button>
{/if}
