<script lang="ts">
	import Search from "$icon/search";
	import Input from "#lib/components/ui/Input.svelte";

	interface Props {
		type?: string;
		query: string;
		placeholder: string;
		mono?: boolean;
	}

	let { type, query = $bindable(), placeholder, mono = false }: Props = $props();
</script>

<form method="GET" class="flex items-center gap-xs">
	{#if type}
		<input type="hidden" name="type" value={type} />
	{/if}
	<Input
		name="q"
		type="search"
		bind:value={query}
		{placeholder}
		iconLeft={Search}
		class={mono ? "w-full typography-monospace-regular" : "w-full"}
	/>
</form>