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

	import * as m from '$lib/paraglide/messages';

	import SupporterIcon from './SupporterIcon.svelte';
	import UnlockDialog from './UnlockDialog.svelte';
	import { isSupporter, refreshSupporter } from './store';

	let open = $state(false);

	// Verify once on load so the badge reflects real status site-wide.
	onMount(refreshSupporter);
</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 {$isSupporter
		? '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={$isSupporter ? m.supporter_active() : m.supporter_support()}
	aria-label={$isSupporter ? m.supporter_active() : m.supporter_support()}
>
	<SupporterIcon filled={$isSupporter} />
	<span class="hidden sm:inline">{m.supporter_badge()}</span>
</button>

<UnlockDialog bind:open />
