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

	interface Props {
		href: string;
		variant?: 'primary' | 'secondary';
		target?: string;
		rel?: string;
		children: Snippet;
	}

	let { href, variant = 'primary', target, rel, children }: Props = $props();
</script>

<a {href} {target} {rel} class="ornate-btn group inline-block" data-variant={variant}>
	<svg
		class="ornate-frame absolute inset-0 h-full w-full"
		viewBox="0 0 200 60"
		preserveAspectRatio="none"
		fill="none"
		xmlns="http://www.w3.org/2000/svg"
	>
		<!-- Main border -->
		<rect
			x="4"
			y="4"
			width="192"
			height="52"
			rx="4"
			class="ornate-rect"
			stroke-width="1.5"
		/>
		<!-- Corner ornaments: top-left -->
		<path d="M4 16 C4 16, 0 10, 0 4 C0 4, 6 0, 12 0 L12 3 C8 3, 5 5, 4 8 Z" class="ornate-corner" />
		<!-- top-right -->
		<path d="M196 16 C196 16, 200 10, 200 4 C200 4, 194 0, 188 0 L188 3 C192 3, 195 5, 196 8 Z" class="ornate-corner" />
		<!-- bottom-left -->
		<path d="M4 44 C4 44, 0 50, 0 56 C0 56, 6 60, 12 60 L12 57 C8 57, 5 55, 4 52 Z" class="ornate-corner" />
		<!-- bottom-right -->
		<path d="M196 44 C196 44, 200 50, 200 56 C200 56, 194 60, 188 60 L188 57 C192 57, 195 55, 196 52 Z" class="ornate-corner" />
		<!-- Top center flourish -->
		<path d="M85 4 C90 -2, 95 -1, 100 2 C105 -1, 110 -2, 115 4" class="ornate-flourish" stroke-width="1.2" />
		<!-- Bottom center flourish -->
		<path d="M85 56 C90 62, 95 61, 100 58 C105 61, 110 62, 115 56" class="ornate-flourish" stroke-width="1.2" />
		<!-- Side diamonds: left -->
		<path d="M4 26 L0 30 L4 34" class="ornate-flourish" stroke-width="1.2" />
		<!-- right -->
		<path d="M196 26 L200 30 L196 34" class="ornate-flourish" stroke-width="1.2" />
	</svg>
	<span class="ornate-content relative z-10 inline-flex items-center gap-2">
		{@render children()}
	</span>
</a>

<style>
	.ornate-btn {
		position: relative;
		padding: 0.85rem 2.2rem;
		cursor: pointer;
	}

	.ornate-frame {
		pointer-events: none;
		overflow: visible;
	}

	/* ── Primary ── */
	.ornate-btn[data-variant='primary'] .ornate-rect {
		stroke: var(--color-gold);
		fill: var(--color-gold);
		fill-opacity: 0.1;
		transition: fill-opacity 0.25s ease;
	}
	.ornate-btn[data-variant='primary']:hover .ornate-rect {
		fill-opacity: 0.22;
	}

	.ornate-btn[data-variant='primary'] .ornate-corner {
		fill: var(--color-gold);
		opacity: 0.7;
		transition: opacity 0.25s ease;
	}
	.ornate-btn[data-variant='primary']:hover .ornate-corner {
		opacity: 1;
	}

	.ornate-btn[data-variant='primary'] .ornate-flourish {
		stroke: var(--color-gold);
		fill: none;
		opacity: 0.7;
		transition: opacity 0.25s ease;
	}
	.ornate-btn[data-variant='primary']:hover .ornate-flourish {
		opacity: 1;
	}

	.ornate-btn[data-variant='primary'] .ornate-content {
		color: var(--color-gold);
		font-weight: 600;
		opacity: 0.85;
		transition: opacity 0.25s ease;
	}
	.ornate-btn[data-variant='primary']:hover .ornate-content {
		opacity: 1;
	}

	/* ── Secondary ── */
	.ornate-btn[data-variant='secondary'] .ornate-rect {
		stroke: var(--color-gold);
		fill: none;
		opacity: 0.45;
		transition: opacity 0.25s ease;
	}
	.ornate-btn[data-variant='secondary']:hover .ornate-rect {
		opacity: 0.8;
	}

	.ornate-btn[data-variant='secondary'] .ornate-corner {
		fill: var(--color-gold);
		opacity: 0.4;
		transition: opacity 0.25s ease;
	}
	.ornate-btn[data-variant='secondary']:hover .ornate-corner {
		opacity: 0.8;
	}

	.ornate-btn[data-variant='secondary'] .ornate-flourish {
		stroke: var(--color-gold);
		fill: none;
		opacity: 0.4;
		transition: opacity 0.25s ease;
	}
	.ornate-btn[data-variant='secondary']:hover .ornate-flourish {
		opacity: 0.8;
	}

	.ornate-btn[data-variant='secondary'] .ornate-content {
		color: var(--color-gold);
		font-weight: 600;
		opacity: 0.7;
		transition: opacity 0.25s ease;
	}
	.ornate-btn[data-variant='secondary']:hover .ornate-content {
		opacity: 1;
	}
</style>
