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

	interface Props extends HTMLButtonAttributes {
		variant?: 'primary' | 'secondary' | 'danger' | 'ghost';
		size?: 'sm' | 'md';
		loading?: boolean;
		children: Snippet;
	}

	let { variant = 'secondary', size = 'md', loading = false, children, ...rest }: Props = $props();
</script>

<button class="btn btn-{variant} btn-{size}" disabled={loading || rest.disabled} {...rest}>
	{#if loading}
		<span class="spinner"></span>
	{/if}
	{@render children()}
</button>

<style>
	.btn {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		border: 1px solid var(--border);
		border-radius: var(--radius);
		cursor: pointer;
		font-weight: 500;
		transition: all var(--duration) var(--ease);
		white-space: nowrap;
		background: var(--surface-2);
		color: var(--text);
	}
	.btn:hover:not(:disabled) {
		background: var(--surface-3);
		border-color: var(--border-strong);
	}
	.btn:disabled {
		opacity: 0.5;
		cursor: not-allowed;
	}
	.btn-sm { padding: 4px 10px; font-size: var(--font-size-sm); }
	.btn-md { padding: 6px 14px; font-size: var(--font-size-base); }
	.btn-primary {
		background: var(--accent);
		border-color: var(--accent);
		color: white;
	}
	.btn-primary:hover:not(:disabled) {
		background: var(--accent-hover);
		border-color: var(--accent-hover);
	}
	.btn-danger {
		background: transparent;
		border-color: var(--rose);
		color: var(--rose);
	}
	.btn-danger:hover:not(:disabled) {
		background: var(--rose-dim);
	}
	.btn-ghost {
		background: transparent;
		border-color: transparent;
	}
	.btn-ghost:hover:not(:disabled) {
		background: var(--surface-2);
	}
	.spinner {
		width: 14px;
		height: 14px;
		border: 2px solid var(--text-muted);
		border-top-color: var(--text);
		border-radius: 50%;
		animation: spin 0.6s linear infinite;
	}
	@keyframes spin { to { transform: rotate(360deg); } }
</style>
