<!--
  Phase 4: Collapsible group for proxies by project/stage.
  Shows a header with project name, proxy count, and expandable body.
-->
<script lang="ts">
	import type { Snippet } from 'svelte';
	import { IconChevronRight } from '$lib/components/icons';

	interface Props {
		title: string;
		count: number;
		defaultExpanded?: boolean;
		children: Snippet;
	}

	const { title, count, defaultExpanded = true, children }: Props = $props();

	let expanded = $state(defaultExpanded);
</script>

<div class="rounded-xl border border-[var(--border-primary)] bg-[var(--surface-card)] overflow-hidden">
	<!-- Header -->
	<button
		type="button"
		onclick={() => { expanded = !expanded; }}
		class="flex w-full items-center gap-3 px-5 py-3.5 text-left transition-colors hover:bg-[var(--surface-card-hover)]"
	>
		<IconChevronRight
			size={16}
			class="shrink-0 text-[var(--text-tertiary)] transition-transform duration-200 {expanded ? 'rotate-90' : ''}"
		/>
		<span class="text-sm font-semibold text-[var(--text-primary)]">{title}</span>
		<span class="rounded-full bg-[var(--surface-card-hover)] px-2 py-0.5 text-xs font-medium text-[var(--text-secondary)]">
			{count}
		</span>
	</button>

	<!-- Expandable body -->
	{#if expanded}
		<div class="border-t border-[var(--border-primary)] p-4 animate-fade-in">
			<div class="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
				{@render children()}
			</div>
		</div>
	{/if}
</div>
