<script setup lang="ts">
import { computed } from 'vue'

const props = defineProps<{
  title?: string
  loading?: boolean
  error?: string
}>()

defineEmits<{
  retry: []
  create: []
  refresh: []
}>()
</script>

<template>
  <div class="ks-list-page">
    <div v-if="title" class="ks-list-page__header">
      <h1 class="ks-list-page__title">{{ title }}</h1>
      <div class="ks-list-page__actions">
        <slot name="actions" />
      </div>
    </div>

    <div class="ks-list-page__search">
      <slot name="search" />
    </div>

    <div class="ks-list-page__content">
      <slot />
    </div>
  </div>
</template>

<style scoped>
.ks-list-page {
  display: flex;
  flex-direction: column;
  gap: var(--ks-space-4);
}

.ks-list-page__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ks-list-page__title {
  font-size: var(--ks-font-page);
  font-weight: 700;
  margin: 0;
}

.ks-list-page__actions {
  display: flex;
  gap: var(--ks-space-2);
}

.ks-list-page__search {
  padding: var(--ks-space-4);
  background: var(--ks-color-surface);
  border: 1px solid var(--ks-color-border);
  border-radius: var(--ks-radius-md);
}

.ks-list-page__content {
  background: var(--ks-color-surface);
  border: 1px solid var(--ks-color-border);
  border-radius: var(--ks-radius-md);
}
</style>
