<script setup>
import BaseIndex from "./BaseIndex.vue";
import BasePageHeader from "./BasePageHeader.vue";

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

<template>
  <BaseIndex flush>
    <div class="flex min-h-0 flex-col">
      <div
        class="shrink-0 rounded-t-xl border border-b-0 border-surface-200 dark:border-surface-600 bg-surface-100 dark:bg-surface-800 p-4 sm:p-5"
      >
        <BasePageHeader :title="title" :subtitle="subtitle" :meta="meta">
          <template v-if="$slots.title" #title>
            <slot name="title" />
          </template>
          <template v-if="$slots.subtitle" #subtitle>
            <slot name="subtitle" />
          </template>
          <template v-if="$slots.info" #info>
            <slot name="info" />
          </template>
          <template v-if="$slots.actions" #actions>
            <slot name="actions" />
          </template>
        </BasePageHeader>
      </div>

      <div
        class="min-h-0 rounded-b-xl border border-surface-200 dark:border-surface-600 bg-surface-0 p-4 sm:p-5 dark:bg-surface-950"
        :class="bodyClass"
      >
        <slot />
      </div>
    </div>
  </BaseIndex>
</template>
