<template>
  <v-row no-gutters class="py-3 px-2" align="center">
    <v-col cols="auto">
      <v-btn
        :variant="
          item?._action === 'rejected' || item?.reject ? 'tonal' : 'outlined'
        "
        :color="
          item?._action === 'rejected' || item?.reject ? 'error' : undefined
        "
        :disabled="readOnly"
        size="small"
        class="me-2"
        icon
        @click.stop="handleReject"
      >
        <v-icon>mdi-close</v-icon>
      </v-btn>
    </v-col>
    <v-col cols="auto">
      <v-btn
        :variant="
          item?._action === 'accepted' || item?.approve ? 'tonal' : 'outlined'
        "
        :color="
          item?._action === 'accepted' || item?.approve ? 'success' : undefined
        "
        :disabled="readOnly"
        size="small"
        icon
        @click.stop="handleApprove"
      >
        <v-icon>mdi-check</v-icon>
      </v-btn>
    </v-col>
  </v-row>
</template>

<script setup lang="ts">
const props = defineProps({
  item: { type: Object, required: true },
  readOnly: { type: Boolean, default: false },
});

const emit = defineEmits(["reject", "approve"]);

function handleReject() {
  emit("reject", props.item);
}

function handleApprove() {
  emit("approve", props.item);
}
</script>
