<template>
  <div class="card-body text-center">
    <!-- Fournisseur Avatar -->
    <ClientAvatar
      :avatar-url="avatarUrl"
      :initials="initials"
      :alt="fournisseurName"
      :editable="true"
      @edit="$emit('edit-avatar')"
    />

    <!-- Fournisseur Name -->
    <h5 class="font-weight-bolder mb-0">
      {{ fournisseurName }}
    </h5>
    <p class="text-sm text-secondary mb-3">
      {{ fournisseurType }}
    </p>

    <!-- Quick Stats -->
    <div class="row text-center mt-3">
      <div class="col-6 border-end">
        <h6 class="text-sm font-weight-bolder mb-0">
          {{ contactsCount }}
        </h6>
        <p class="text-xs text-secondary mb-0">Contacts</p>
      </div>
      <div class="col-6">
        <h6 class="text-sm font-weight-bolder mb-0">
          <i
            class="fas"
            :class="
              isActive
                ? 'fa-check-circle text-success'
                : 'fa-times-circle text-danger'
            "
          ></i>
        </h6>
        <p class="text-xs text-secondary mb-0">Statut</p>
      </div>
    </div>
  </div>
</template>

<script setup>
import ClientAvatar from "@/components/atoms/client/ClientAvatar.vue";
import { defineProps, defineEmits } from "vue";
defineProps({
  avatarUrl: {
    type: String,
    default: null,
  },
  initials: {
    type: String,
    required: true,
  },
  fournisseurName: {
    type: String,
    required: true,
  },
  fournisseurType: {
    type: String,
    default: "Fournisseur",
  },
  contactsCount: {
    type: Number,
    default: 0,
  },
  isActive: {
    type: Boolean,
    default: true,
  },
});

defineEmits(["edit-avatar"]);
</script>

<style scoped>
.avatar-sm .avatar-placeholder {
  width: 36px;
  height: 36px;
  font-size: 0.875rem;
}
</style>
