<script lang="ts">
	import { cn } from "$lib/utils";

	type TitleSize = "h1" | "h2" | "h3" | "h4" | "h5" | "p";
	type TitleFontWeight = "bold" | "semibold" | "normal" | "medium";

	const colors = {
		theme: "text-primary",
		white: "text-white",
		black: "text-black",
		primaryLight: "text-primary/80",
	};

	const weights = {
		bold: "font-bold",
		semibold: "font-semibold",
		medium: "font-medium",
		normal: "font-normal",
	} as const;

	const sizes = {
		h1: "text-6xl md:text-7xl",
		h2: "text-5xl lg:text-6xl",
		h3: "text-4xl lg:text-5xl",
		h4: "text-2xl lg:text-3xl",
		h5: "text-xl lg:text-2xl",
		p: "text-lg lg:text-xl",
	};

	let {
		size = "h2",
		weight = "semibold",
		capitalize = true,
		color = "theme",
		center = false,
		id = undefined,
		children,
	}: {
		size?: TitleSize;
		weight?: TitleFontWeight;
		capitalize?: boolean;
		color?: keyof typeof colors;
		center?: boolean;
		id?: string;
		children?: any;
	} = $props();
</script>

<svelte:element
	this={size}
	class={cn(
		sizes[size] || sizes.p,
		weights[weight ?? "bold"],
		capitalize && "capitalize",
		colors[color],
		center && "text-center",
	)}
	{id}
>
	{@render children?.()}
</svelte:element>
