<template>
  <div class="module-page">
    <div class="module-header">
      <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">
      <div class="module-list">
        <div class="module-list-header">
          <span class="list-title">{{ listTitle }}</span>
          <span class="list-note">{{ TEXT.common.empty.listPlaceholder }}</span>
        </div>
        <StateEmpty :title="emptyTitle" :description="emptyDescription" />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import StateEmpty from "./StateEmpty.vue";
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: 16px;
}

.module-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.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: 1px solid var(--ctms-border-color);
  border-radius: var(--ctms-radius);
  padding: 20px;
}

.module-list-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.list-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--ctms-text-main);
}

.list-note {
  font-size: 12px;
  color: var(--ctms-text-disabled);
}
</style>
