<template>
  <div class="user-type-badge row items-center justify-center q-mb-lg">
    <div class="badge-pill row items-center q-px-lg q-py-sm">
      <q-icon :name="tipoData.icon" size="20px" class="q-mr-sm" />
      <span class="badge-label">{{ $t(tipoData.label) }}</span>
    </div>
  </div>
</template>

<script setup>
import { computed } from "vue";

const props = defineProps({
  tipo: { type: String, required: true },
});

const tipoMap = {
  administrador: { icon: "mdi-shield-account-outline", label: "auth.type.administrador" },
  associado:     { icon: "mdi-account-outline",        label: "auth.type.associado" },
  parceiro:      { icon: "mdi-handshake-outline",       label: "auth.type.parceiro" },
};

const tipoData = computed(() => tipoMap[props.tipo] ?? tipoMap.administrador);
</script>

<style lang="scss" scoped>
@use "sass:map";
@use "src/css/quasar.variables.scss" as *;

.badge-pill {
  background: map.get($colors, "violet-normal");
  border-radius: 999px;
  color: white;
}
.badge-label {
  font-size: 13px;
  font-weight: 600;
  color: white;
}
</style>
