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

	interface Props {
        // TODO(boltless): embed 'type' field into search query
		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-2">
	<input type="hidden" name="type" value={type} />
    <ButtonGroup class="w-full">
        <Input
            name="q"
            type="search"
            bind:value={query}
            {placeholder}
            iconLeft={Search}
            class={mono ? "flex-1 font-mono" : "flex-1"}
        />
        <Button type="submit" icon={Search} aria-label="Search" />
    </ButtonGroup>
</form>
