<script setup lang="ts">
import { useAdminLocale } from '../composables/useAdminLocale';

const { t } = useAdminLocale();

defineProps<{
  text?: string;
  hint?: string;
}>();
</script>

<template>
  <div class="admin-table-empty">
    <div class="admin-table-empty__icon" aria-hidden="true">
      <svg width="40" height="40" viewBox="0 0 40 40" fill="none">
        <rect x="6" y="10" width="28" height="22" rx="3" stroke="currentColor" stroke-width="1.5" opacity="0.35" />
        <path d="M14 18h12M14 23h8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" opacity="0.25" />
      </svg>
    </div>
    <p class="admin-table-empty__text">{{ text ?? t('common.no_data') }}</p>
    <p v-if="hint" class="admin-table-empty__hint">{{ hint }}</p>
    <slot />
  </div>
</template>

<style scoped>
.admin-table-empty {
  margin: 12px;
  padding: 34px 18px;
  border: 1px dashed var(--border);
  border-radius: 10px;
  background: #fbfaf7;
  text-align: center;
}
.admin-table-empty__icon {
  color: var(--text-muted);
  opacity: 0.72;
  margin-bottom: 10px;
  display: flex;
  justify-content: center;
}
.admin-table-empty__text {
  margin: 0;
  font-size: 14px;
  font-weight: 750;
  color: var(--text);
}
.admin-table-empty__hint {
  font-size: 12px;
  color: var(--text-muted);
  margin: 6px 0 0;
}
</style>
