<template>
  <div class="eli-tabela__celula-tags">
    <v-chip
      v-for="(tag, idx) in dados?.opcoes ?? []"
      :key="idx"
      class="eli-tabela__celula-tag"
      size="small"
      variant="tonal"
      :color="tag.cor"
      :clickable="Boolean(tag.acao)"
      @click.stop.prevent="tag.acao?.()"
    >
      <component
        :is="tag.icone"
        v-if="tag.icone"
        class="eli-tabela__celula-tag-icone"
        :size="14"
      />

      <span>{{ tag.rotulo }}</span>
    </v-chip>
  </div>
</template>

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

import type { tiposTabelaCelulas } from "./tiposTabelaCelulas";

export default defineComponent({
  name: "EliTabelaCelulaTags",
  components: { VChip },
  props: {
    dados: {
      type: Object as PropType<tiposTabelaCelulas["tags"]>,
      required: false,
    },
  },
  setup({ dados }) {
    return { dados };
  },
});
</script>

<style>
.eli-tabela__celula-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.eli-tabela__celula-tag {
  cursor: default;
}

.eli-tabela__celula-tag-icone {
  margin-right: 6px;
}
</style>