<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_-me-1 m_px-1 m_pt-025 m_pb-05 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, shown }">
						<Btn thin flat :class="item.class" @click="show()">
							<Icon :name="item.icon" size="0.8" style="margin-bottom: -0.1rem" class=" line-height-0" />
							<p class="-ms-025">
								{{ resolveI18n(item.label) }}
							</p>
							<Icon name="keyboard_arrow_down" size="0.8" style="margin-bottom: -0.1rem" class="line-height-0 menu-chevron" :class="{ 'menu-chevron-open': shown }" />
						</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" class=" line-height-0" />
						<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" class=" line-height-0" />
					<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);
} */

.bglTopMenu .router-link-active {
background: var(--bgl-primary) !important;
color: var(--bgl-white) !important;
}

/* Chevron flips when its dropdown is open (mirror-pair → rotate, not swap). */
.menu-chevron {
transition: transform 0.2s ease;
}
.menu-chevron-open {
transform: rotate(180deg);
}

</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>
