<script lang="ts">
	import type { Snippet } from "svelte";
	import Button from "./Button.svelte";

	interface Props {
		title: string;
		actionLabel?: string;
		onAction?: () => void;
		onMore?: () => void;
		children?: Snippet;
	}

	let { title, actionLabel, onAction, onMore, children }: Props = $props();
</script>

<div class="flex flex-wrap items-center gap-2 p-1 rounded-[32px] w-full">
	<div class="flex-1 min-w-0">
		<h1 class="font-heading text-h1 text-white truncate">{title}</h1>
	</div>
	{#if children}
		{@render children()}
	{/if}
	{#if actionLabel && onAction}
		<Button variant="primary" onclick={onAction}>
			{actionLabel}
		</Button>
	{/if}
	{#if onMore}
		<button
			type="button"
			class="p-1 flex items-center justify-center hover:bg-dark/50 rounded-full transition-colors"
			onclick={onMore}
		>
			<span
				class="material-symbols-rounded text-light"
				style="font-size: 24px; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;"
			>
				more_horiz
			</span>
		</button>
	{/if}
</div>
