<script lang="ts">
	interface Props {
		organized?: boolean;
		hoverable?: boolean;
		tristate?: boolean;
		dim?: boolean;
	}

	let { organized, hoverable = false, tristate = false, dim = false }: Props = $props();
</script>

{#if organized}
	<span class:hoverable class="icon-gray icon-base icon-[material-symbols--check-circle]"></span>
{:else if organized === undefined || !tristate}
	<span
		class:hoverable
		class="icon-gray dim icon-base icon-[material-symbols--check-circle-outline]"
	></span>
{:else}
	<span class:hoverable class:dim class="icon-gray icon-base icon-[material-symbols--unpublished]"
	></span>
{/if}
