<script setup>
import { computed } from "vue";

const props = defineProps({
  level: {
    type: Number,
    default: 2,
    validator: (v) => [1, 2, 3, 4].includes(v),
  },
  title: { type: String, default: "" },
});

const tag = computed(() => `h${props.level}`);
const classes = computed(() => {
  const base = "font-semibold text-surface-950 dark:text-surface-0";
  switch (props.level) {
    case 1:
      return `${base} text-2xl mb-6`;
    case 2:
      return `${base} text-xl mb-4`;
    case 3:
      return `${base} text-lg mb-3`;
    case 4:
      return `${base} text-base mb-2`;
    default:
      return base;
  }
});
</script>

<template>
  <component :is="tag" :class="classes">
    <slot>{{ title }}</slot>
  </component>
</template>
