<script lang="ts">
	/**
	 * The supporter mark. A heart rather than a padlock: nothing here is locked
	 * away as a punishment - the extras are a thank-you for chipping in, and a
	 * padlock framed it as a paywall. Filled once someone is supporting,
	 * outlined as an invitation before that.
	 */
	interface Props {
		filled?: boolean;
		class?: string;
	}

	let { filled = false, class: className = 'h-4 w-4' }: Props = $props();
</script>

{#if filled}
	<svg class={className} viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
		<path
			d="M12 21.1l-1.45-1.32C5.4 15.1 2 12 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.5-3.4 6.6-8.55 11.29L12 21.1z"
		/>
	</svg>
{:else}
	<svg
		class={className}
		viewBox="0 0 24 24"
		fill="none"
		stroke="currentColor"
		stroke-width="1.9"
		stroke-linecap="round"
		stroke-linejoin="round"
		aria-hidden="true"
	>
		<path
			d="M12 21.1l-1.45-1.32C5.4 15.1 2 12 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.5-3.4 6.6-8.55 11.29L12 21.1z"
		/>
	</svg>
{/if}
