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

	export const stepHeader = tv({
		slots: {
			root: "flex flex-col gap-xs",
			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()}>
	<h2 data-testid="stepHeaderTitle" class={slot.title()}>{title}</h2>
	{#if subtitle}
		<p class={slot.subtitle()}>{subtitle}</p>
	{/if}
</header>