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

	const dispatch = createEventDispatcher();

	function zoomIn() {
		dispatch('zoom', { direction: 'in' });
	}

	function zoomOut() {
		dispatch('zoom', { direction: 'out' });
	}

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

<div class="flex flex-col gap-3">
	<!-- Info button -->
	<button title="Info" class="btn btn-sm btn-circle" on:click={showInfo}>
		<svg
			xmlns="http://www.w3.org/2000/svg"
			viewBox="0 -960 960 960"
			fill="currentColor"
			class="size-3.5"
		>
			<path
				d="M480-680q-33 0-56.5-23.5T400-760q0-33 23.5-56.5T480-840q33 0 56.5 23.5T560-760q0 33-23.5 56.5T480-680Zm-60 560v-480h120v480H420Z"
			/>
		</svg>
	</button>

	<!-- Zoom controls -->
	<div class="flex flex-col gap-1 max-sm:hidden">
		<button title="Zoom in" class="btn btn-sm btn-circle" on:click={zoomIn}>+</button>
		<button title="Zoom out" class="btn btn-sm btn-circle" on:click={zoomOut}>-</button>
	</div>

	<!-- Livestreams link -->
	<div class="max-sm:hidden">
		<a
			href="https://www.twitch.tv/directory/category/wplace"
			class="btn btn-sm btn-circle"
			target="_blank"
			title="Livestreams"
		>
			<svg
				xmlns="http://www.w3.org/2000/svg"
				xml:space="preserve"
				viewBox="0 0 2400 2800"
				class="size-4"
			>
				<path fill="#fff" d="m2200 1300-400 400h-400l-350 350v-350H600V200h1600z" />
				<g fill="#9146ff">
					<path
						d="M500 0 0 500v1800h600v500l500-500h400l900-900V0H500zm1700 1300-400 400h-400l-350 350v-350H600V200h1600v1100z"
					/>
					<path d="M1700 550h200v600h-200zm-550 0h200v600h-200z" />
				</g>
			</svg>
		</a>
	</div>
</div>
