<script lang="ts">
	import type { Component, Snippet } from "svelte";
	import type { SvelteHTMLElements } from "svelte/elements";
	import { resolve } from "$app/paths";
	import PanelHeader from "#lib/components/repo/PanelHeader.svelte";

	interface Props {
		title: string;
		href?: string;
		icon: Component<SvelteHTMLElements["svg"]>;
		count?: number;
		class?: string;
		headerClass?: string;
		bodyClass?: string;
		clamp?: boolean;
		children: Snippet;
	}

	let {
		title,
		href,
		icon,
		count,
		class: className,
		headerClass,
		bodyClass,
		clamp = false,
		children
	}: Props = $props();
</script>

<section
	class={[
		"flex min-w-0 flex-col gap-sm p-md",
		clamp && "md:h-0 md:min-h-full md:has-[details[open]]:h-auto",
		className
	]}
>
	<div class={["flex items-center gap-xs", headerClass]}>
		{#if href}
			<a
				href={resolve(href as "/")}
				class="group no-underline hover:no-underline focus-visible:outline-2 focus-visible:outline-border-focus"
			>
				<PanelHeader {title} {icon} {count} />
			</a>
		{:else}
			<PanelHeader {title} {icon} {count} />
		{/if}
	</div>
	<div class={[clamp && "min-h-0 flex-1", bodyClass]}>
		{@render children()}
	</div>
</section>