<template>
  <section class="stack">
    <h2>EliBadge (indicador)</h2>

    <div class="row">
      <EliBadge badge="3">
        <v-icon>mdi-bell</v-icon>
      </EliBadge>

      <EliBadge badge="Novo" radius="pill" color="success">
        <span class="chip">Mensagens</span>
      </EliBadge>

      <EliBadge dot :visible="true" color="error">
        <v-icon>mdi-email</v-icon>
      </EliBadge>
    </div>

    <div class="row">
      <EliBadge badge="99+" :visible="mostrar" radius="12px">
        <span class="chip">Toggle visible</span>
      </EliBadge>

      <EliBotao variant="outlined" @click="mostrar = !mostrar">
        Alternar visible ({{ mostrar ? "mostrando" : "oculto" }})
      </EliBotao>
    </div>
  </section>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";
import { EliBadge } from "@/componentes/indicador";
import { EliBotao } from "@/componentes/botao";

export default defineComponent({
  name: "IndicadorPlayground",
  components: { EliBadge, EliBotao },
  setup() {
    const mostrar = ref(true);
    return { mostrar };
  },
});
</script>

<style scoped>
.stack {
  display: grid;
  gap: 16px;
}

.row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
}

.chip {
  display: inline-flex;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.15);
}
</style>
