<script setup>
import BaseTitle from "./BaseTitle.vue";
import { HEADER_INFO_BADGE_CLASSES } from "../../constants/badgeStyles.js";

defineProps({
  title: { type: String, default: "" },
  subtitle: { type: String, default: "" },
  meta: { type: [String, Number], default: "" },
});
</script>

<template>
  <div class="flex flex-wrap items-center justify-between gap-x-4 gap-y-3">
    <div class="min-w-0 flex-1 self-center">
      <BaseTitle :level="1" class="!m-0 leading-tight">
        <slot name="title">{{ title }}</slot>
      </BaseTitle>
      <div v-if="subtitle || $slots.subtitle" class="mt-0.5">
        <p
          class="m-0 text-lg font-normal text-surface-600 dark:text-surface-300"
        >
          <slot name="subtitle">{{ subtitle }}</slot>
        </p>
      </div>
    </div>

    <div
      v-if="meta || meta === 0 || $slots.info || $slots.actions"
      class="flex shrink-0 flex-wrap items-center gap-2 self-center"
    >
      <span v-if="meta || meta === 0" :class="HEADER_INFO_BADGE_CLASSES">
        {{ meta }}
      </span>
      <div v-if="$slots.info" class="flex shrink-0 items-center">
        <slot name="info" />
      </div>
      <div v-if="$slots.actions" class="flex shrink-0 items-center">
        <slot name="actions" />
      </div>
    </div>
  </div>
</template>
