<template>
  <!-- Estado de carregamento: consulta em andamento -->
  <div v-if="carregando" class="eli-tabela eli-tabela--carregando" aria-busy="true">
    Carregando...
  </div>

  <!-- Estado de erro: mostra mensagem retornada pela consulta -->
  <div v-else-if="erro" class="eli-tabela eli-tabela--erro" role="alert">
    <div class="eli-tabela__erro-titulo">Erro</div>
    <div class="eli-tabela__erro-mensagem">{{ erro }}</div>
  </div>

  <!-- Estado vazio: consulta sem registros -->
  <div v-else class="eli-tabela eli-tabela--vazio">
    {{ mensagemVazio ?? "Nenhum registro encontrado." }}
  </div>
</template>

<script lang="ts">
import { defineComponent, PropType } from "vue";

export default defineComponent({
  name: "EliTabelaEstados",
  props: {
    carregando: {
      type: Boolean,
      required: true,
    },
    erro: {
      type: String as PropType<string | null>,
      required: true,
    },
    mensagemVazio: {
      type: String as PropType<string | undefined>,
      required: false,
      default: undefined,
    },
  },
});
</script>
