<script lang="ts">
	import { slide } from 'svelte/transition';
	import { quintOut } from 'svelte/easing';
	import type { Snippet } from 'svelte';

	interface Props {
		title: string;
		badge?: string;
		accentClass?: string;
		defaultOpen?: boolean;
		children: Snippet;
	}

	let { title, badge = '', accentClass = '', defaultOpen = true, children }: Props = $props();

	let open = $state(defaultOpen);
</script>

<div class="gp overflow-hidden">
	<button
		class="flex items-center justify-between w-full cursor-pointer group"
		onclick={() => open = !open}
	>
		<div class="flex items-center gap-2">
			<svg
				class="w-3 h-3 transition-transform duration-200 text-white/50 group-hover:text-white/80"
				class:rotate-90={open}
				viewBox="0 0 24 24"
				fill="none"
				stroke="currentColor"
				stroke-width="3"
				stroke-linecap="round"
				stroke-linejoin="round"
			>
				<polyline points="9 18 15 12 9 6" />
			</svg>
			<span class="gp-title {accentClass}">{title}</span>
		</div>
		{#if badge}
			<span class="gp-label">{badge}</span>
		{/if}
	</button>

	{#if open}
		<div transition:slide={{ duration: 250, easing: quintOut }}>
			<div class="flex flex-col gap-[var(--spacing-gp-gap)] pt-1">
				{@render children()}
			</div>
		</div>
	{/if}
</div>
