<script setup lang="ts">
// One section of the Fil — header + stacked items. Empty sections are hidden
// by the PARENT (v-if on length), never here.
defineProps<{
  title: string
  icon?: string
  discrete?: boolean
  priority?: boolean
}>()
</script>

<template>
  <!-- ld-v2 -->
  <section
    class="feed-section"
    :class="{ 'feed-section--discrete': discrete, 'feed-section--priority': priority }"
  >
    <h2 class="feed-section__title">
      <UIcon v-if="icon" :name="icon" class="feed-section__icon" />
      <span>{{ title }}</span>
    </h2>
    <div class="feed-section__items">
      <slot />
    </div>
  </section>
</template>

<style scoped>
.feed-section { margin-bottom: 1.75rem; }
.feed-section__title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.625rem;
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--mood-text-muted);
}
.feed-section--priority .feed-section__title { color: var(--mood-status-fenetre); }
.feed-section--discrete .feed-section__title {
  font-size: 0.8125rem;
  opacity: 0.8;
}
.feed-section__icon { font-size: 1rem; }
.feed-section__items {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}
.feed-section--discrete .feed-section__items { opacity: 0.85; }
</style>
