<script lang="ts">
	import { button, buttonIcon } 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 {href} rel="external noopener noreferrer" class={button({ iconSide: "left" })}>
	<span
		class="inline-flex min-w-0 items-center justify-center gap-[inherit] transition-transform duration-150 ease-in-out"
	>
		<Book class={buttonIcon()} aria-hidden="true" />
		{label}
	</span>
</a>