<script lang="ts">
	export let large = false;
	export let favourite: boolean | undefined = undefined;
	export let hoverable = false;
</script>

{#if favourite}
	<span class:hoverable class:large class="icon-yellow icon-[material-symbols--star-rounded]" />
{:else}
	<span
		class:hoverable
		class:large
		class="icon-yellow dim icon-[material-symbols--star-outline-rounded]"
	/>
{/if}

<style lang="postcss">
	span {
		@apply -m-px -translate-y-px text-[26px];
	}

	span.large {
		@apply text-[34px];
	}
</style>
