<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 Button from "$lib/components/ui/Button.svelte";
	import ButtonGroup, { segmentProps } from "$lib/components/ui/ButtonGroup.svelte";
	import IssueSearch from "./IssueSearch.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>

<!--
	grid mirrors the appview: [group | search | new]. on mobile the search spans the
	full width on its own row while the group and new button share the row below it.
-->
<div class="grid grid-cols-[auto_1fr_auto] gap-2">
	<div class="col-span-3 sm:col-span-1 sm:col-start-2">
		<IssueSearch />
	</div>

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

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