<template>
  <section class="space-y-6">
    <header v-if="$slots.title || $slots.subtitle" class="space-y-2">
      <h1 v-if="$slots.title" class="mos-title text-2xl font-semibold">
        <slot name="title" />
      </h1>
      <p v-if="$slots.subtitle" class="mos-muted text-sm">
        <slot name="subtitle" />
      </p>
    </header>

    <div class="mos-card p-5">
      <FilterPaginationBar
        v-if="page !== undefined && totalPages !== undefined"
        :page="page"
        :total-pages="totalPages"
        @prev="emit('prev')"
        @next="emit('next')"
      >
        <template #filters>
          <slot name="filters" />
        </template>
        <template #actions>
          <slot name="actions" />
        </template>
        <slot />
        <slot name="empty" />
      </FilterPaginationBar>
      <template v-else>
        <div class="flex flex-wrap items-center justify-between gap-3">
          <div class="flex flex-wrap items-center gap-2">
            <slot name="filters" />
          </div>
          <div class="flex flex-wrap items-center gap-2">
            <slot name="actions" />
          </div>
        </div>
        <div class="mt-4 space-y-3">
          <slot />
          <slot name="empty" />
        </div>
      </template>

      <div v-if="$slots.footer" class="mt-4">
        <slot name="footer" />
      </div>
    </div>
  </section>
</template>

<script setup lang="ts">
import FilterPaginationBar from './FilterPaginationBar.vue'

defineProps<{ page?: number; totalPages?: number }>()
const emit = defineEmits<{ (event: 'prev'): void; (event: 'next'): void }>()
</script>
