<script lang="ts">
	import { cn } from "tailwind-variants";
	import { DOLLY, WORDMARK } from "#lib/components/ui/logotype.ts";

	interface Props {
		wordmark?: boolean;
		class?: string;
	}

	let { wordmark = false, class: className = "" }: Props = $props();
</script>

{#if wordmark}
	<svg
		class={cn("h-8", className)}
		viewBox="0 0 117 32"
		fill="currentColor"
		xmlns="http://www.w3.org/2000/svg"
		role="img"
		aria-label="tangled"
	>
		{#each WORDMARK as d (d)}
			<path {d} fill-rule="evenodd" />
		{/each}
		<path d={DOLLY} fill-rule="evenodd" />
	</svg>
{:else}
	<svg
		class={cn("size-8", className)}
		viewBox="0 0 32 32"
		fill="currentColor"
		xmlns="http://www.w3.org/2000/svg"
		role="img"
		aria-label="tangled"
	>
		<path d={DOLLY} fill-rule="evenodd" />
	</svg>
{/if}