<template>
  <div class="avatar avatar-xxl position-relative mx-auto mb-3">
    <img
      v-if="avatarUrl"
      :src="avatarUrl"
      :alt="alt"
      class="w-100 border-radius-lg shadow-sm"
    />
    <div
      v-else
      class="avatar-placeholder w-100 border-radius-lg shadow-sm d-flex align-items-center justify-content-center bg-gradient-primary"
    >
      <span class="text-white text-lg font-weight-bold">
        {{ initials }}
      </span>
    </div>
    <!-- Edit Avatar Button -->
    <div class="position-absolute bottom-0 end-0 mb-n2 me-n2 d-flex gap-1">
      <a
        v-if="editable"
        href="javascript:;"
        class="btn btn-sm btn-icon-only bg-gradient-light"
        @click="$emit('edit')"
      >
        <i
          class="fa fa-pen"
          data-bs-toggle="tooltip"
          data-bs-placement="top"
          title="Modifier l'image"
        ></i>
      </a>

      <!-- Save Avatar Button -->
      <a
        v-if="hasUnsavedChanges"
        href="javascript:;"
        class="btn btn-sm btn-icon-only bg-gradient-success"
        @click="$emit('save')"
      >
        <i
          class="fa fa-save"
          data-bs-toggle="tooltip"
          data-bs-placement="top"
          title="Enregistrer l'image"
        ></i>
      </a>
    </div>
  </div>
</template>

<script setup>
import { defineProps, defineEmits } from "vue";
defineProps({
  avatarUrl: {
    type: String,
    default: null,
  },
  initials: {
    type: String,
    required: true,
  },
  alt: {
    type: String,
    default: "Avatar",
  },
  editable: {
    type: Boolean,
    default: false,
  },
  hasUnsavedChanges: {
    type: Boolean,
    default: false,
  },
});

defineEmits(["edit", "save"]);
</script>

<style scoped>
.avatar-placeholder {
  width: 100px;
  height: 100px;
  font-size: 2rem;
}
</style>
