<script lang="ts">
	import { createEventDispatcher } from 'svelte';
	import ColorPalette from './ColorPalette.svelte';

	const dispatch = createEventDispatcher();

	function close() {
		dispatch('close');
	}
</script>

<!-- Bottom sheet drawer -->
<div class="fixed inset-0 z-50 flex items-end justify-center" on:click={close}>
	<!-- Backdrop -->
	<div class="absolute inset-0 bg-black/20"></div>

	<!-- Drawer -->
	<div
		class="relative w-full bg-base-100 rounded-t-2xl shadow-xl p-4 pb-6"
		on:click|stopPropagation
	>
		<button
			on:click={close}
			class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2"
		>
			✕
		</button>

		<div class="flex items-center gap-2 mb-4">
			<svg
				xmlns="http://www.w3.org/2000/svg"
				viewBox="0 -960 960 960"
				fill="currentColor"
				class="size-5"
			>
				<path
					d="M240-120q-45 0-89-22t-71-58q26 0 53-20.5t27-59.5q0-50 35-85t85-35q50 0 85 35t35 85q0 66-47 113t-113 47Zm230-240L360-470l358-358q11-11 27.5-11.5T774-828l54 54q12 12 12 28t-12 28L470-360Z"
				/>
			</svg>
			<h3 class="font-bold text-lg">Paint pixel (#)</h3>
		</div>

		<ColorPalette />
	</div>
</div>
