<script lang="ts">
	import "/node_modules/flag-icons/css/flag-icons.min.css";

	export let open = false;
	export let countries: { iso: string; name: string, flag: string }[] = [];
	export let current: string;
	export let localized: {lang: string, path: string}[];
</script>

<div class="relative">
	<button on:click={() => open = !open} class="py-1 px-2.5 rounded-lg bg-white hover:bg-gray-100 shadow-md">
		<span class={`fi fis fi-${countries.find((x) => x.iso == current)?.flag}`} />
	</button>
	{#if open}
		<div class="absolute right-0 top-full z-10 rounded-lg grid grid-cols-2 gap-2 bg-white w-[240px] shadow-md">
			{#each countries as country}
				<button on:click={() => {
					let path = localized.find((l) => l.lang === country.iso)?.path;
					if (!path) return;
					window.location.href = path;
				}} class="block hover:bg-gray-100 cursor-pointer p-4 rounded-lg w-full text-center">
					<span class={`fi fis fi-${country.flag}`} />
					<span>{country.name}</span>
				</button>
			{/each}
		</div>
	{/if}
</div>
