<script lang="ts">
	import type { Component, Snippet } from "svelte";
	import type { SvelteHTMLElements } from "svelte/elements";
	import { buttonIcon } from "#lib/components/ui/Button.svelte";
	import { combobox } from "#lib/components/ui/Combobox.svelte";

	interface Props {
		label: string;
		icon?: Component<SvelteHTMLElements["svg"]>;
		children: Snippet;
	}

	let { label, icon: Icon, children }: Props = $props();

	const headingId = $props.id();
	const classes = combobox();
</script>

<div role="group" aria-labelledby={headingId} class="group/dropdown-group not-first:mt-xs">
	<div
		id={headingId}
		role="presentation"
		class={classes.groupHeading({
			class: "flex items-center gap-1.5 group-first/dropdown-group:pt-2xs"
		})}
	>
		{#if Icon}
			<Icon class={buttonIcon()} aria-hidden="true" />
		{/if}
		{label}
	</div>
	{@render children()}
</div>