<script lang="ts">
	import type { HTMLButtonAttributes, HTMLAnchorAttributes } from 'svelte/elements';
	type ButtonColor = 'brand' | 'accent' | 'bg';

	interface Props {
		children: import('svelte').Snippet;
		href?: string;
		color?: ButtonColor;
		onclick?: (e: MouseEvent) => void;
		[key: string]: any;
	}

	let { children, href, color = 'bg', onclick, ...rest }: Props = $props();

	const isLink = $derived(!!href);
	const isExternal = $derived(href?.startsWith('http'));
</script>

{#if isLink}
	<a
		{href}
		class="hitbox-wrapper"
		target={isExternal ? '_blank' : undefined}
		rel={isExternal ? 'noopener noreferrer' : undefined}
		{...rest}
		><span class="btn {color}">
			{@render children?.()}
		</span>
	</a>
{:else}
	<button class="hitbox-wrapper" {onclick} {...rest}>
		<span class="btn {color}">{@render children?.()}</span>
	</button>
{/if}

<style>
	.hitbox-wrapper {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-height: 48px;
		min-width: 48px;
		appearance: none;
		background: transparent;
		border: none;
		padding: 0 4px;
		cursor: pointer;
		text-decoration: none;
		-webkit-tap-highlight-color: transparent;
	}
	.btn {
		display: flex;
		align-items: center;
		justify-content: center;
		width: fit-content;
		flex-shrink: 0;
		padding: 0 1.2rem;
		min-width: 40px;
		height: 36px;
		border-radius: 20px;
		border: none;
		box-shadow: var(--shadow-small);
		font-family: 'URW Gothic', sans-serif;
		font-size: 0.93rem;
		font-weight: 400;
		letter-spacing: 0.05ch;
		transition:
			all 0.1s ease,
			box-shadow 0.2s;
	}

	.accent {
		background-color: var(--color-accent);
		color: var(--color-title);
		font-weight: 600;
	}

	.brand {
		background-color: var(--color-brand);
		color: rgb(30, 30, 30);
	}

	.bg {
		background-color: var(--color-bg-light);
		color: var(--color-title);
	}

	.hitbox-wrapper:hover .btn {
		filter: brightness(1.5);
	}

	.hitbox-wrapper:active .btn {
		transform: scale(0.98);
	}
</style>
