<script setup>
/** List layout similar to TLP BaseIndex — page title slot + padded content. */
defineProps({
  title: { type: String, default: "" },
  subtitle: { type: String, default: "" },
  error: { type: String, default: "" },
  flush: { type: Boolean, default: false },
  /** Hide the outer page title/subtitle block (e.g. when the title lives inside B2CDataTable). */
  hideHeader: { type: Boolean, default: false },
});
</script>

<template>
  <div class="flex flex-col gap-4">
    <div v-if="!hideHeader && ($slots.title || title)" class="min-w-0">
      <h1
        v-if="title || $slots.title"
        class="text-2xl font-semibold text-surface-950 dark:text-surface-0 m-0"
      >
        <slot name="title">{{ title }}</slot>
      </h1>
      <p
        v-if="subtitle || $slots.subtitle"
        class="text-surface-600 dark:text-surface-400 text-sm mt-1 mb-0"
      >
        <slot name="subtitle">{{ subtitle }}</slot>
      </p>
      <p v-if="error" class="text-red-600 dark:text-red-400 text-sm mt-2 mb-0">
        {{ error }}
      </p>
    </div>
    <p
      v-else-if="hideHeader && error"
      class="text-red-600 dark:text-red-400 text-sm mb-0"
    >
      {{ error }}
    </p>
    <div :class="{ 'min-w-0': true, '!p-0 !gap-0': flush }">
      <slot />
    </div>
  </div>
</template>
