<template>
  <div class="space-y-2">
    <Heading :level="2" weight="semibold">{{ title }}</Heading>
    <div v-if="meta.length" class="text-sm text-base-content/60 flex flex-wrap gap-x-4 gap-y-1">
      <span v-for="item in meta" :key="item">{{ item }}</span>
    </div>
  </div>
</template>

<script setup lang="ts">
const props = withDefaults(defineProps<{ title: string; meta?: string[] }>(), {
  meta: () => []
})

const meta = computed(() => (props.meta || []).filter(Boolean))
</script>
