<template>
  <div class="btn-group" role="group">
    <!-- View Button -->
    <button
      v-if="showView"
      @click="$emit('view')"
      type="button"
      class="btn btn-sm btn-outline-primary"
      title="Xem chi tiết"
    >
      <i class="fe fe-eye"></i>
    </button>

    <!-- Edit Button -->
    <button
      v-if="showEdit && permissions.canEdit"
      @click="$emit('edit')"
      type="button"
      class="btn btn-sm btn-outline-secondary"
      title="Chỉnh sửa"
    >
      <i class="fe fe-edit"></i>
    </button>

    <!-- Cancel Button -->
    <button
      v-if="showCancel && permissions.canCancel"
      @click="$emit('cancel')"
      type="button"
      class="btn btn-sm btn-outline-danger"
      title="Hủy hóa đơn"
    >
      <i class="fe fe-x"></i>
    </button>

    <!-- Approve Button -->
    <button
      v-if="showApprove && permissions.canApprove"
      @click="$emit('approve')"
      type="button"
      class="btn btn-sm btn-outline-success"
      title="Duyệt hóa đơn"
    >
      <i class="fe fe-check"></i>
    </button>
  </div>
</template>

<script setup>
const props = defineProps({
  permissions: {
    type: Object,
    default: () => ({
      canEdit: false,
      canCancel: false,
      canApprove: false
    })
  },
  showView: {
    type: Boolean,
    default: true
  },
  showEdit: {
    type: Boolean,
    default: true
  },
  showCancel: {
    type: Boolean,
    default: true
  },
  showApprove: {
    type: Boolean,
    default: true
  }
});

const emit = defineEmits(['view', 'edit', 'cancel', 'approve']);
</script>

<style scoped>
.btn-group .btn {
  border-radius: 0.25rem;
  margin-right: 0.25rem;
}

.btn-group .btn:last-child {
  margin-right: 0;
}

.btn-sm {
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
}

.btn i {
  font-size: 0.875rem;
}
</style>
