<script lang="ts">
	import type { Snippet } from 'svelte';

	let {
		variant = 'primary',
		size = 'md',
		disabled = false,
		type = 'button',
		href,
		onclick,
		children,
		class: extraClass = '',
	}: {
		variant?: 'primary' | 'secondary' | 'danger' | 'ghost';
		size?: 'sm' | 'md';
		disabled?: boolean;
		type?: 'button' | 'submit';
		href?: string;
		onclick?: (e: MouseEvent) => void;
		children: Snippet;
		class?: string;
	} = $props();

	const baseClasses = 'aurora-btn inline-flex items-center justify-center gap-2 font-medium transition-all disabled:opacity-50 disabled:pointer-events-none';
	const sizeClasses: Record<string, string> = {
		sm: 'aurora-btn--sm',
		md: 'aurora-btn--md',
	};
	const variantClasses: Record<string, string> = {
		primary: 'btn-primary',
		secondary: 'btn-secondary',
		danger: 'btn-danger',
		ghost: 'btn-ghost',
	};

	const classes = $derived(
		`${baseClasses} ${sizeClasses[size]} ${variantClasses[variant]} ${extraClass}`.trim()
	);
</script>

{#if href && !disabled}
	<a {href} class={classes} onclick={onclick}>
		{@render children()}
	</a>
{:else}
	<button {type} {disabled} class={classes} onclick={onclick}>
		{@render children()}
	</button>
{/if}

<style>
	.aurora-btn {
		border-radius: 12px;
		letter-spacing: -0.005em;
		cursor: pointer;
		font-family: inherit;
		white-space: nowrap;
	}
	.aurora-btn--sm {
		padding: 0 0.95rem;
		height: 34px;
		font-size: 0.82rem;
	}
	.aurora-btn--md {
		padding: 0 1.15rem;
		height: 40px;
		font-size: 0.875rem;
	}

	/* Primary — gradient lavender→orchid pill, the page's main CTA. */
	.btn-primary {
		background: linear-gradient(135deg, var(--color-primary), var(--color-orchid));
		color: white;
		border: 0;
		box-shadow:
			0 6px 20px -8px var(--color-glow-strong),
			inset 0 1px 0 rgba(255, 255, 255, 0.35);
		font-weight: 600;
	}
	.btn-primary:hover:not(:disabled) {
		transform: translateY(-1px);
		box-shadow:
			0 10px 28px -10px var(--color-glow-strong),
			inset 0 1px 0 rgba(255, 255, 255, 0.4);
	}
	.btn-primary:active:not(:disabled) { transform: translateY(0); }

	.btn-secondary {
		background: var(--color-glass-strong);
		color: var(--color-foreground);
		border: 1px solid var(--color-rule-strong);
	}
	.btn-secondary:hover:not(:disabled) {
		background: var(--color-glass-elev);
		border-color: var(--color-rule-strong);
	}

	.btn-danger {
		background: var(--color-error-fg);
		color: white;
		border: 0;
		font-weight: 600;
		box-shadow: 0 6px 20px -8px color-mix(in srgb, var(--color-error-fg) 50%, transparent);
	}
	.btn-danger:hover:not(:disabled) {
		transform: translateY(-1px);
		box-shadow: 0 10px 28px -10px color-mix(in srgb, var(--color-error-fg) 60%, transparent);
	}

	.btn-ghost {
		background: transparent;
		color: var(--color-muted-foreground);
		border: 1px solid transparent;
	}
	.btn-ghost:hover:not(:disabled) {
		background: var(--color-glass-strong);
		color: var(--color-foreground);
		border-color: var(--color-border);
	}
</style>
