<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-brand-900 dark:text-brand-200",
        white: "text-white",
        black: "text-black",
        primaryLight: "text-brand-900",
        primaryDark: "text-brand-200",
        gradientPrimary:
            "bg-gradient-to-br from-brand-600 to-brand-950 dark:from-brand-100 dark:to-brand-400 inline-block text-transparent bg-clip-text leading-normal sm:pb-1 xl:pb-2",
    };

    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 = "medium",
        capitalize = true,
        color = "gradientPrimary",
        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>
