<template>
  <div class="ui-section-title">
    <img
      v-if="img"
      :src="img"
      class="ui-section-title__flag"
      width="24"
      height="16"
      alt=""
    >
    <h1
      v-if="titleTag === 'h1'"
      :class="titleClass"
    >{{ title }}</h1>
    <h2
      v-else-if="titleTag === 'h2'"
      :class="titleClass"
    >{{ title }}</h2>
    <h3
      v-else-if="titleTag === 'h3'"
      :class="titleClass"
    >{{ title }}</h3>
    <!-- Без счётчика остаётся тот же чип, только с одной иконкой -->
    <UiCount
      v-if="count || icon"
      :icon="icon"
      class="ui-section-title__count"
    >{{ count }}</UiCount>
    <!-- Доп. бейдж рядом с заголовком (например «editorial») -->
    <slot/>
  </div>
</template>

<script setup lang="ts">
const props = withDefaults(defineProps<{
  count?: string | number
  titleTag?: string
  title: string
  icon?: string
  img?: string
  /** `page` — страничный заголовок (18px, капс, 700); `section` — заголовок секции (18px, без капса, 600) */
  variant?: 'page' | 'section'
}>(), {
  titleTag: 'h1',
  variant: 'page'
});

const titleClass = computed(() => [
  'ui-section-title__title',
  props.variant === 'section' ? '--section' : '_title'
]);
</script>

<style lang="scss">
.ui-section-title__title {
  display: inline;
  margin-right: 12px;
  margin-bottom: 0;
  vertical-align: middle;
}

.ui-section-title__title.--section {
  @include font-lg;

  font-weight: 600;
}

.ui-section-title__flag,
.ui-section-title__count.ui-count {
  display: inline-flex;
  vertical-align: middle;
}

.ui-section-title__flag {
  margin-right: 12px;
}
</style>
