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

	import UnlockDialog from './UnlockDialog.svelte';
	import { isPremium, refreshPremium } from './premium';

	let open = $state(false);

	// Verify once on load so the badge reflects real status site-wide.
	onMount(refreshPremium);
</script>

<button
	type="button"
	class="flex h-9 shrink-0 cursor-pointer items-center gap-1.5 rounded-full border px-3 text-xs font-semibold transition-colors {$isPremium
		? 'border-amber-400/50 bg-amber-400/10 text-amber-700 hover:bg-amber-400/20 dark:text-amber-300'
		: 'border-border/70 text-muted-foreground hover:bg-muted hover:text-foreground'}"
	onclick={() => (open = true)}
	title={$isPremium ? 'Supporter extras active' : 'Support Drizz.li'}
	aria-label={$isPremium ? 'Supporter extras active' : 'Support Drizz.li'}
>
	{#if $isPremium}
		<!-- star -->
		<svg class="h-4 w-4" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
			<path
				d="M12 2.5l2.9 6 6.6.9-4.8 4.6 1.2 6.5L12 17.9 6.1 20.5l1.2-6.5L2.5 9.4l6.6-.9L12 2.5z"
			/>
		</svg>
		<span class="hidden sm:inline">Premium</span>
	{:else}
		<!-- padlock -->
		<svg
			class="h-4 w-4"
			fill="none"
			stroke="currentColor"
			viewBox="0 0 24 24"
			stroke-width="1.75"
			aria-hidden="true"
		>
			<rect x="4" y="10" width="16" height="11" rx="2" />
			<path stroke-linecap="round" d="M8 10V7a4 4 0 0 1 8 0v3" />
		</svg>
		<span class="hidden sm:inline">Premium</span>
	{/if}
</button>

<UnlockDialog bind:open />
