<script setup>
/**
 * Title headings: h1–h4 with semibold font and consistent spacing.
 * Use for main page titles and prominent headings.
 * Use default slot for content or title prop for plain text.
 */
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>
