<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: "" },
  muted: { type: Boolean, default: false },
});

const tag = computed(() => `h${props.level}`);
const classes = computed(() => {
  const base = props.muted
    ? "font-medium text-surface-500 dark:text-surface-400"
    : "font-medium text-surface-700 dark:text-surface-300";
  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>
