<script lang="ts">
	import { page } from "$app/state";
	import Search from "$icon/search";
	import X from "$icon/x";
	import Button from "$lib/components/ui/Button.svelte";
	import Input from "$lib/components/ui/Input.svelte";

	let form: HTMLFormElement;
	// seed from the url so the query (and the clear button) survive a submit
	let value = $state(page.url.searchParams.get("q") ?? "");

	const clear = () => {
		value = "";
		form.requestSubmit();
	};
</script>

<form bind:this={form} class="flex w-full" method="GET">
	<!-- TODO: wire up search query submission -->
	<div class="relative flex w-full items-center">
		<Input
			bind:value
			type="text"
			name="q"
			placeholder="Search issues..."
			aria-label="Search issues"
			iconLeft={Search}
			class={value ? "w-full pr-9" : "w-full"}
		/>
		{#if value}
			<Button
				type="button"
				variant="ghost"
				size="sm"
				icon={X}
				onclick={clear}
				aria-label="Clear search"
				class="absolute right-1"
			/>
		{/if}
	</div>
</form>
