<script lang="ts">
	interface Props {
		large?: boolean;
		favourite?: boolean;
		hoverable?: boolean;
	}

	let { large = false, favourite, hoverable = false }: Props = $props();
</script>

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

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

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