<script lang="ts">
	import type { PageProps } from './$types';

	let { data }: PageProps = $props();
	// let dropdownElement: HTMLDivElement;
	// let searchTerm: string = $state('');
	// let value: option = $state();
	// let isOpen: boolean = $state(false);
	// let option: any = $state();
	// let filteredOptions = $derived(
	// 	searchTerm
	// 		? data.countries.filter((c) => c.name.toLowerCase().startsWith(searchTerm.toLowerCase()))
	// 		: data.countries
	// );
	//
	// const handleInputChange = () => {};
	// const handleOptionSelect = (item: any) => {};
	// TODO: pick search library
	// fuse - 6.2
	// @nozbe/microfuzz 1.3
	// fast-fuzzy 8.6
	// fuzzy-search 1
</script>

<main class="container mx-auto my-3 max-w-4xl p-4">
	<h1 class="my-5 text-center text-4xl font-light">HotColdCities</h1>
	<h2 class="mx-auto max-w-xl text-center text-xl leading-tight md:text-2xl">
		Compare the hottest 🌡️ and coldest ❄️ cities in any region to plan 📅, move 🚚, or explore 🌍
		with ease! 🎉✨
	</h2>

	<button class="btn btn-lg btn-soft btn-primary"> Hi </button>

	<!-- <section> -->
	<!-- 	<div class="relative w-full" bind:this={dropdownElement}> -->
	<!-- 		<div class="form-control w-full"> -->
	<!-- 			<div class="input input-bordered flex items-center"> -->
	<!-- 				<input -->
	<!-- 					type="text" -->
	<!-- 					class="flex-grow bg-transparent focus:outline-none" -->
	<!-- 					placeholder="Type in to filter countries" -->
	<!-- 					bind:value={searchTerm} -->
	<!-- 					oninput={handleInputChange} -->
	<!-- 					onfocus={() => (isOpen = true)} -->
	<!-- 				/> -->
	<!-- 				<button class="btn btn-ghost btn-sm" onclick={() => (isOpen = !isOpen)} type="button"> -->
	<!-- 					<svg -->
	<!-- 						xmlns="http://www.w3.org/2000/svg" -->
	<!-- 						class="h-4 w-4" -->
	<!-- 						fill="none" -->
	<!-- 						viewBox="0 0 24 24" -->
	<!-- 						stroke="currentColor" -->
	<!-- 					> -->
	<!-- 						<path -->
	<!-- 							stroke-linecap="round" -->
	<!-- 							stroke-linejoin="round" -->
	<!-- 							stroke-width="2" -->
	<!-- 							d={isOpen ? 'M5 15l7-7 7 7' : 'M19 9l-7 7-7-7'} -->
	<!-- 						/> -->
	<!-- 					</svg> -->
	<!-- 				</button> -->
	<!-- 			</div> -->
	<!-- 		</div> -->
	<!---->
	<!-- 		{#if isOpen} -->
	<!-- 			<ul -->
	<!-- 				class="dropdown-content menu bg-base-100 rounded-box z-50 max-h-60 w-full overflow-auto p-2 shadow" -->
	<!-- 			> -->
	<!-- 				{#if filteredOptions.length > 0} -->
	<!-- 					{#each filteredOptions as option, i} -->
	<!-- 						<li> -->
	<!-- 							<button -->
	<!-- 								onclick={() => handleOptionSelect(option)} -->
	<!-- 								class={value === option ? 'active' : ''} -->
	<!-- 							> -->
	<!-- 								{option} -->
	<!-- 							</button> -->
	<!-- 						</li> -->
	<!-- 					{/each} -->
	<!-- 				{:else} -->
	<!-- 					<li class="p-2 text-gray-500">No options found</li> -->
	<!-- 				{/if} -->
	<!-- 			</ul> -->
	<!-- 		{/if} -->
	<!-- 	</div> -->
	<!-- </section> -->

	<ul>
		{#each data.countries as country, idx (country.id)}
			<li>{country.name} - {country.emoji}</li>
		{/each}
	</ul>
	<!-- <code>{JSON.stringify(data, null, 2)}</code> -->
</main>
