<script lang="ts">
	import type { Component, Snippet } from "svelte";
	import type { SvelteHTMLElements } from "svelte/elements";
	import LayerCard from "#lib/components/ui/LayerCard.svelte";
	import LayerCardPrimary from "#lib/components/ui/LayerCardPrimary.svelte";
	import LayerCardSecondary from "#lib/components/ui/LayerCardSecondary.svelte";

	interface Props {
		title: string;
		icon: Component<SvelteHTMLElements["svg"]>;
		/** an unresolved app path; when set the heading itself links, as the
		 * notifications card does */
		href?: string;
		/** trailing content in the header row, e.g. a "view all" link */
		action?: Snippet;
		children: Snippet;
	}

	let { title, icon, href, action, children }: Props = $props();

	const Icon = $derived(icon);
</script>

{#snippet heading()}
	<h3 class="flex items-center gap-xs text-black dark:text-white">
		<Icon class="size-4 shrink-0" aria-hidden="true" />
		{title}
	</h3>
{/snippet}

<LayerCard>
	<LayerCardSecondary class="min-h-[calc(2.5rem-2*var(--layer-gap))] justify-between py-0 pr-0">
		{#if href}
			<!-- 
			<a
				href={resolve(href as "/")}
				class="flex flex-1 items-center px-sm py-xs no-underline hover:no-underline"
			>
			</a> 
			-->
			{@render heading()}
		{:else}
			{@render heading()}
		{/if}
		{@render action?.()}
	</LayerCardSecondary>
	<LayerCardPrimary padding="none">
		{@render children()}
	</LayerCardPrimary>
</LayerCard>