<script lang="ts">
	import SidebarIcon from '@lucide/svelte/icons/sidebar';
	import SearchForm from './search-form.svelte';
	import { Button } from '$lib/components/ui/button/index.js';
	import { Separator } from '$lib/components/ui/separator/index.js';
	import * as Sidebar from '$lib/components/ui/sidebar/index.js';
	import UploadButton from './upload-button.svelte';
	import ThemeToggle from './theme-toggle.svelte';

	const sidebar = Sidebar.useSidebar();
</script>

<header class="sticky top-0 z-50 flex w-full items-center border-b bg-background">
	<div class="my-2 flex h-(--header-height) w-full items-center gap-2 px-4">
		<div class="flex w-full justify-between">
			<div class="flex gap-3">
				<Button class="size-8" variant="ghost" size="icon" onclick={sidebar.toggle}>
					<SidebarIcon />
				</Button>
				<Separator orientation="vertical" class="mr-2 h-(--header-height) border" />
			</div>

			<SearchForm />

			<div class="flex w-24 items-center gap-4">
				<UploadButton />
				<ThemeToggle />
			</div>
		</div>
	</div>
</header>
