<script setup>
const props = defineProps({
  text: String,
  image: String,
  type: String,
  size: String,
});
</script>
<template>
  <div
    @click="$emit('justclick')"
    class="avatarbox rounded-full mx-0 px-0 size-9 font-bold is-flex is-justify-content-center is-align-items-center"
    :style="{
      border: image ? 'none' : '1px solid var(--bulma-grey-90)',
    }"
  >
    <figure
      v-if="image"
      class="image"
    >
      <img
        class="is-rounded"
        :src="`${$path()}download?name=${image}`"
      />
    </figure>
    <span v-else>{{ text }}</span>
  </div>
</template>
<style scoped>
.avatarbox:hover {
  background-color: var(--bulma-grey-100);
  &:hover {
    background-color: var(--bulma-grey-95);
  }
}
</style>
