<script lang="ts">
  import { useQuery } from "convex-svelte";
  import { api } from "@sgse-app/backend/convex/_generated/api";

  const simbolosQuery = useQuery(api.simbolos.getAll, {});
</script>

<div class="space-y-4">
  <h2 class="text-3xl font-bold text-brand-dark">Simbolos</h2>

  {#each simbolosQuery.data as simbolo}
    <div class="p-4 rounded-xl border hover:shadow bgbase-100">
      <h3 class="text-lg font-bold text-brand-dark">{simbolo.nome}</h3>
      <p class="text-sm text-gray-500">{simbolo.vencValor}</p>
      <p class="text-sm text-gray-500">{simbolo.repValor}</p>
      <p class="text-sm text-gray-500">{simbolo.descricao}</p>
    </div>
  {:else}
    <p>Nenhum simbolo encontrado</p>
  {/each}
</div>
