<script lang="ts">
	let {
		value,
		annotations,
		selected,
		disabled,
		onclick
	}: {
		value: number;
		annotations: number[];
		selected: boolean;
		disabled: boolean;
		onclick: () => void;
	} = $props();
</script>

<button
	class="aspect-square rounded-4xl border border-gray-200 {selected
		? 'bg-primary-500 dark:bg-primary-500'
		: ''} {disabled ? 'bg-gray-200 dark:bg-gray-400' : ''}"
	class:bg-gray-200={disabled}
	class:cursor-pointer={!disabled}
	{onclick}
	{disabled}
>
	<div class="flex items-center justify-center">
		{#if value}
			<div>{value || ' '}</div>
		{:else}
			<div class="flex flex-wrap justify-center space-y-2 space-x-2 md:flex-col">
				{#each annotations as nb (nb)}
					<div
						class="bg-secondary-300 flex h-9 w-9 items-center justify-center rounded-full p-1 text-black"
						class:bg-white={selected}
					>
						{nb}
					</div>
				{/each}
			</div>
		{/if}
	</div>
</button>
