<script lang="ts">
	import { button } from "$lib/components/ui/Button.svelte";
	import Book from "$icon/book";

	interface Props {
		href: string;
		label?: string;
	}

	let { href, label = "Documentation" }: Props = $props();
</script>

<!-- a plain anchor rather than <Button href>: Button's href is a ResolvedPathname
     so the router can check it, and these point out of the app -->
<a {href} rel="external noopener noreferrer" class={button()}>
	<span
		class="inline-flex min-w-0 items-center justify-center gap-[inherit] transition-transform duration-150 ease-in-out"
	>
		<Book class="size-4 shrink-0" aria-hidden="true" />
		{label}
	</span>
</a>
