<script setup lang="ts">
import { Menu } from '@lucide/vue';
import githubIcon from '~/assets/icons/github.svg';

const emit = defineEmits<{
	sidebarToggleChange: [];
}>();
</script>

<template>
	<header class="sticky top-0 z-30 bg-background">
		<div class="w-full max-w-container min-h-14 mx-auto px-4 flex items-center">
			<BackButton class="max-lg:hidden!" />
			<IconButton
				class="lg:hidden"
				variant="ghost"
				color="default"
				@click="emit('sidebarToggleChange')"
			>
				<Menu />
			</IconButton>
			<Logo class="ml-4" />
			<div class="flex-1" />
			<HeaderSearch class="mr-2" />
			<IconButton
				variant="ghost"
				color="default"
				href="https://github.com/alixan-engineer/alixan-ui-nuxt"
				target="_blank"
				tooltip="Github"
			>
				<img
					:src="githubIcon"
					alt=""
					loading="lazy"
					class="size-6 dark:invert"
				/>
			</IconButton>
			<HeaderSettings />
		</div>
	</header>
</template>
