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

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

const tag = computed(() => `h${props.level}`);
const classes = computed(() => {
  const base = "font-medium text-surface-700 dark:text-surface-300";
  const size = props.level === 2 ? "text-xl mb-4" : "text-lg pb-2";
  const border = props.divider
    ? "border-b border-surface-200 dark:border-surface-700"
    : "";
  return [base, size, border].filter(Boolean).join(" ");
});
</script>

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