<script lang="ts">
	import { resolve } from "$app/paths";
	import Search from "$icon/search";
	import Input from "../ui/Input.svelte";

	interface Props {
		class?: string;
	}

	let { class: className = "" }: Props = $props();

	const appPath = (path: string) => resolve(path as "/");
</script>

<form action={appPath("/search")} method="GET" class={`relative hidden md:block ${className}`}>
	<label class="sr-only" for="topbar-search">Search</label>
	<Input
		id="topbar-search"
		name="q"
		type="search"
		placeholder="Search"
		iconLeft={Search}
		class="h-8 w-80 gap-1.5 px-2 py-0"
	/>
</form>
