<script lang="ts">
	import Icon from './Icon.svelte';

	interface Props {
		glyph?: string;
		accent?: string;
		size?: number;
		spin?: boolean;
	}
	let { glyph = 'star', accent = 'var(--amber)', size = 132, spin = true }: Props = $props();
</script>

<div class="stamp {spin ? 'stamp--spin' : ''}" style="width:{size}px;height:{size}px">
	<svg class="stamp__ring" viewBox="0 0 132 132" width={size} height={size}>
		<circle cx="66" cy="66" r="63" fill={accent} />
		<circle
			cx="66"
			cy="66"
			r="63"
			fill="none"
			stroke="var(--ink)"
			stroke-width="2.5"
			stroke-dasharray="2.5 6"
			stroke-linecap="round"
			opacity="0.9"
		/>
		<circle cx="66" cy="66" r="50" fill="none" stroke="var(--paper)" stroke-width="1.5" opacity="0.85" />
	</svg>
	<div class="stamp__face">
		<Icon name={glyph} size={size * 0.34} stroke="var(--paper)" sw={1.7} />
	</div>
</div>
