<template>
  <component :is="tagName" :id="id">
    <slot>{{ text }}</slot>
  </component>
</template>

<script lang="ts" setup>
import { computed } from 'vue';

const props = defineProps({
  level: {
    type: Number,
    required: true,
    validator: (value: number) => [1, 2, 3].includes(value),
  },
  text: {
    type: String,
    default: '',
  },
  id: {
    type: String,
    default: null,
  },
});

const tagName = computed(() => {
  if (props.level === 1) return 'h1';
  if (props.level === 2) return 'h2';
  if (props.level === 3) return 'h3';
  return 'h2'; // Fallback, though validator should prevent this
});

// No specific SCSS needed here as it relies on global h1, h2, h3 styles
// from valerie-ui.scss.
</script>
