<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 {
  padding: 28px 16px;
  text-align: center;
}
.admin-table-empty__icon {
  color: var(--green-text);
  opacity: 0.45;
  margin-bottom: 8px;
  display: flex;
  justify-content: center;
}
.admin-table-empty__text {
  font-size: 13px;
  color: var(--text-muted);
}
.admin-table-empty__hint {
  font-size: 12px;
  color: #555;
  margin-top: 4px;
}
</style>
