<script lang="ts">
	import { createEventDispatcher } from 'svelte';
	import type { WplaceColor } from '../../constants/colors';
	import { selectedColor } from '../../stores/canvas';

	export let color: WplaceColor;
	export let unlocked: boolean;

	const dispatch = createEventDispatcher<{ select: number }>();
	$: selected = $selectedColor === color.id;

	function handleClick() {
		if (!unlocked) return;
		dispatch('select', color.id);
	}
</script>

<button
	type="button"
	class="group relative flex h-8 w-8 items-center justify-center rounded border transition"
	class:border-base-300={unlocked}
	class:border-dashed={!unlocked}
	class:border-base-200={!unlocked}
	class:ring={selected}
	class:ring-primary={selected}
	class:ring-offset-2={selected}
	class:cursor-pointer={unlocked}
	class:cursor-not-allowed={!unlocked}
	class:opacity-50={!unlocked}
	class:hover:border-primary={unlocked}
	on:click={handleClick}
	style={'background:' + color.hex}
	aria-label={'Color ' + color.id}
>
	{#if !unlocked}
		<span class="absolute inset-0 flex items-center justify-center text-xs font-semibold text-base-100">
			$
		</span>
	{/if}
</button>
