<script setup lang="ts">
type Level = 1 | 2 | 3 | 4 | 5;
type HtmlTag = "h1" | "h2" | "h3" | "h4" | "h5" | "p";

const levelClasses: Record<Level, string> = {
	1: "text-3xl lg:text-3xl font-bold mb-5 mt-6",
	2: "text-2xl font-bold mb-4 mt-5",
	3: "text-xl mt-2 font-semibold mb-1",
	4: "text-md mt-2 mb-1 font-semibold",
	5: "text-sm uppercase mb-1 font-semibold mt-2 text-gray-500"
};

const props = withDefaults(
	defineProps<{
		level?: Level;
		htmlTag?: HtmlTag;
		classes?: string;
	}>(),
	{
		level: 1,
		htmlTag: "p",
		classes: ""
	}
);

const computedClass = computed(() => levelClasses[props.level] + " " + props.classes);
</script>

<template>
	<h1 v-if="htmlTag === 'h1'" :class="computedClass"><slot /></h1>
	<h2 v-else-if="htmlTag === 'h2'" :class="computedClass"><slot /></h2>
	<h3 v-else-if="htmlTag === 'h3'" :class="computedClass"><slot /></h3>
	<h4 v-else-if="htmlTag === 'h4'" :class="computedClass"><slot /></h4>
	<h5 v-else-if="htmlTag === 'h5'" :class="computedClass"><slot /></h5>
	<p v-else :class="computedClass"><slot /></p>
</template>
