<script lang="ts">
	import { resolve } from "$app/paths";
	import CircleDot from "$icon/circle-dot";
	import CircleX from "$icon/circle-x";
	import Plus from "$icon/plus";
	import Search from "$icon/search";
	import Button from "$lib/components/ui/Button.svelte";
	import ButtonGroup from "$lib/components/ui/ButtonGroup.svelte";

	interface Props {
		ownerHandle: string;
		repoName: string;
		state: "open" | "closed";
		openCount: number;
		closedCount: number;
	}

	let { ownerHandle, repoName, state, openCount, closedCount }: Props = $props();

	const base = $derived(`/${ownerHandle}/${repoName}/issues`);
</script>

<div class="grid grid-cols-1 gap-2 sm:grid-cols-[1fr_auto_auto]">
	<form class="flex" method="GET">
		<!-- TODO: wire up search query submission -->
		<div class="relative flex w-full items-center">
			<Search
				class="pointer-events-none absolute left-2 size-4 text-foreground-placeholder"
				aria-hidden="true"
			/>
			<input
				class="h-full w-full rounded border border-border-default bg-background-default py-1.5 pr-2 pl-8 text-sm outline-none focus:border-border-strong"
				type="text"
				name="q"
				placeholder="Search issues..."
				aria-label="Search issues"
			/>
		</div>
	</form>

	<ButtonGroup>
		<!-- TODO: wire up state filter navigation -->
		<Button
			href={resolve(`${base}?state=open` as "/")}
			variant={state === "open" ? "default" : "ghost"}
			size="sm"
			icon={CircleDot}
		>
			<span class="hidden sm:inline">{openCount}</span>
			Open
		</Button>
		<Button
			href={resolve(`${base}?state=closed` as "/")}
			variant={state === "closed" ? "default" : "ghost"}
			size="sm"
			icon={CircleX}
		>
			<span class="hidden sm:inline">{closedCount}</span>
			Closed
		</Button>
	</ButtonGroup>

	<!-- TODO: point at the new issue route once it exists -->
	<Button href={resolve(`${base}/new` as "/")} variant="primary" size="sm" icon={Plus}>New</Button>
</div>
