<script lang="ts">
	import IssueList from "$lib/components/repo/issues/IssueList.svelte";
	import IssueToolbar from "$lib/components/repo/issues/IssueToolbar.svelte";

	let { data } = $props();
</script>

<section class="rounded bg-background-default px-6 py-4 text-foreground-default shadow-sm">
	<IssueToolbar
		ownerHandle={data.repo.ownerHandle}
		repoName={data.repo.name}
		state={data.state}
		openCount={data.openCount}
		closedCount={data.closedCount}
	/>
</section>

<div class="mt-2">
	<IssueList ownerHandle={data.repo.ownerHandle} repoName={data.repo.name} issues={data.issues} />
</div>
