<template>
  <div class="module-page ctms-page-shell page--flush">
    <div class="unified-shell">
      <div class="module-header unified-action-bar bar--flush">
        <div>
          <h1 class="module-title">{{ title }}</h1>
          <p v-if="subtitle" class="module-subtitle">{{ subtitle }}</p>
        </div>
        <slot name="actions" />
      </div>
      <div class="module-content unified-section section--flush">
        <div class="module-list">
          <div class="module-placeholder-surface">
            <div class="module-placeholder-main">{{ emptyDescription || emptyTitle }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { TEXT } from "../locales";

withDefaults(
  defineProps<{
    title: string;
    subtitle?: string;
    listTitle?: string;
    emptyTitle?: string;
    emptyDescription?: string;
  }>(),
  {
    subtitle: "",
    listTitle: TEXT.common.empty.listPlaceholder,
    emptyTitle: TEXT.common.empty.building,
    emptyDescription: TEXT.common.empty.buildingDesc,
  }
);
</script>

<style scoped>
.module-page {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.module-title {
  margin: 0;
  font-size: 22px;
  font-weight: 600;
  color: var(--ctms-text-main);
}

.module-subtitle {
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--ctms-text-secondary);
}

.module-list {
  background-color: #fff;
  border: 0;
  border-radius: 0;
  padding: 0;
}

.module-placeholder-surface {
  min-height: 168px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 18px;
  padding: 24px;
  background:
    linear-gradient(180deg, rgba(246, 249, 253, 0.96), rgba(251, 253, 255, 0.98));
}

.module-placeholder-main {
  max-width: 560px;
  text-align: center;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.01em;
  color: #243a5a;
}
</style>
