<script lang="ts">
	import Bookmark from '$lib/icons/Bookmark.svelte';
	import type { MouseEventHandler } from 'svelte/elements';

	interface Props {
		bookmarked: boolean;
		onclick: MouseEventHandler<HTMLButtonElement>;
	}

	let { bookmarked, onclick }: Props = $props();
</script>

<button type="button" title="Toggle bookmark" class="flex text-base" {onclick}>
	<Bookmark hoverable {bookmarked} />
</button>