<script lang="ts">
	import { units, unitsSymbol } from '$lib/helpers/stores';
	import { UnitsEnum } from '$lib/types';

	let dropdownButton: HTMLElement;

	const handleUnitChange = (unit: UnitsEnum) => {
		$units = unit;
		dropdownButton.click()
	};
</script>

<div class="navbar bg-gray-50 shadow-sm">
	<div class="flex-1">
		<a href="/" class="btn btn-ghost text-xl">daisyUI</a>
	</div>
	<div class="flex-none">
		<details class="dropdown dropdown-bottom dropdown-end">
			<summary class="btn btn-ghost btn-square m-1" bind:this={dropdownButton}>{$unitsSymbol}</summary>
			<ul class="dropdown-content menu bg-base-100 rounded-box z-1 w-32 p-2 shadow-sm">
				<li onclick={() => handleUnitChange(UnitsEnum.METRIC)}>
					<a>°C metric</a>
				</li>
				<li onclick={() => handleUnitChange(UnitsEnum.IMPERIAL)}>
					<a>°F imperial</a>
				</li>
			</ul>
		  </details>
	</div>
</div>
