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

	interface Props {
		title: string;
		name?: string;
		description?: string;
		action?: Snippet;
	}

	let { title, name, description, action }: Props = $props();
</script>

<div class="flex w-full flex-col justify-center gap-md">
	<div class="flex flex-wrap items-start justify-between gap-md">
		<h1
			data-testid="settingsHeaderTitle"
			data-name={name}
			class="min-w-0 flex-1 typography-heading-2 text-foreground-default"
		>
			{title}
		</h1>
		{#if action}
			{@render action()}
		{/if}
	</div>
	{#if description}
		<p class="typography-paragraph-regular text-foreground-muted">{description}</p>
	{/if}
</div>