<script setup lang="ts">
defineProps<{
  title?: string
  message?: string
  icon?: string
  actionLabel?: string
}>()

const emit = defineEmits<{ action: [] }>()
</script>

<template>
  <div class="ks-empty-state" role="status" aria-label="조회된 데이터 없음">
    <div class="ks-empty-state__icon">{{ icon ?? '📭' }}</div>
    <div class="ks-empty-state__title">{{ title ?? '조회된 데이터가 없습니다' }}</div>
    <p class="ks-empty-state__message">{{ message ?? '검색 조건을 변경하거나 신규 데이터를 생성해 주세요.' }}</p>
    <button v-if="actionLabel" class="ks-empty-state__action" @click="emit('action')">
      {{ actionLabel }}
    </button>
  </div>
</template>

<style scoped>
.ks-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--ks-space-4);
  text-align: center;
  background: #fff;
  border: 1px dashed var(--ks-color-neutral-300);
  border-radius: var(--ks-radius-md);
  min-height: 220px;
  flex: 1;
  width: 100%;
}

.ks-empty-state__icon {
  font-size: 32px;
  line-height: 1;
  margin-bottom: var(--ks-space-2);
}

.ks-empty-state__title {
  font-size: var(--ks-font-body);
  font-weight: 700;
  color: var(--ks-color-neutral-800);
  margin-bottom: var(--ks-space-1);
}

.ks-empty-state__message {
  font-size: var(--ks-font-caption);
  color: var(--ks-color-neutral-600);
  margin: 0;
  max-width: 360px;
}

.ks-empty-state__action {
  margin-top: var(--ks-space-3);
  padding: 4px 12px;
  font-size: var(--ks-font-caption);
  background: var(--ks-color-action);
  color: #fff;
  border: none;
  border-radius: var(--ks-radius-sm);
  cursor: pointer;
}
.ks-empty-state__action:hover {
  background: var(--ks-color-action-hover);
}
</style>
