<script module lang="ts">
	import { tv, type VariantProps } from "tailwind-variants";

	// every step opens with the same title/subtitle pair (appview onboarding/* fragments)
	export const stepHeader = tv({
		slots: {
			root: "flex flex-col gap-2",
			title: "typography-heading-3 font-semibold text-foreground-default",
			subtitle: "typography-paragraph-regular text-foreground-muted"
		}
	});

	export type StepHeaderVariants = VariantProps<typeof stepHeader>;
</script>

<script lang="ts">
	interface Props {
		title: string;
		subtitle?: string;
	}

	let { title, subtitle }: Props = $props();

	const slot = stepHeader();
</script>

<header class={slot.root()}>
	<h1 class={slot.title()}>{title}</h1>
	{#if subtitle}
		<p class={slot.subtitle()}>{subtitle}</p>
	{/if}
</header>
