<script setup lang="ts">
import type { NavLink } from '@bagelink/vue'
import { Btn, Icon, Dropdown } from '@bagelink/vue'
import { resolveI18n } from '../i18n'

defineProps<{ items: NavLink[] }>()
</script>

<template>
	<div class="flex space-between m_w-100vw overflow m_-ms-1 m_px-05 m_py-025 bglTopMenu">
		<div class="flex gap-025 m_gap-05">
			<template v-for="item in items" :key="item.label">
				<Dropdown v-if="item.children" :value="resolveI18n(item.label)" iconEnd="keyboard_arrow_down">
					<template #trigger="{ show }">
						<Btn thin flat :class="item.class" @click="show()">
							<Icon :name="item.icon" size="0.8" style="margin-bottom: -0.1rem" />
							<p class="-ms-025">
								{{ resolveI18n(item.label) }}
							</p>
							<Icon name="keyboard_arrow_down" size="0.8" style="margin-bottom: -0.1rem" />
						</Btn>
					</template>
					<Btn
						v-for="subItem in item.children" :key="subItem.label" thin flat :to="subItem.to"
						:class="subItem.class" class="block m_px-025" @click="subItem.action?.()"
					>
						<Icon :name="subItem.icon" size="0.8" style="margin-bottom: -0.1rem" />
						<p class="-ms-025">
							{{ subItem.label }}
						</p>
					</Btn>
				</Dropdown>
				<Btn v-else thin flat :to="item.to" :class="item.class" class="m_px-025" @click="item.action?.()">
					<Icon :name="item.icon" size="0.9" style="margin-bottom: -0.1rem" />
					<p class="-ms-025">
						{{ item.label }}
					</p>
				</Btn>
			</template>
		</div>
		<slot name="end" />
	</div>
</template>

<style scoped>
.bgl_btn.router-link-active {
	background-color: var(--bgl-gray-40);
}
</style>

<style>
@media (max-width: 910px) {
	.bglTopMenu::-webkit-scrollbar {
		height: 0px;
	}

	.bglTopMenu {
		mask: linear-gradient(to right, transparent, black 10px, black calc(100% - 10px), transparent);
	}
}
</style>
