<template>
  <Dialog
    v-model:visible="props.confirm.visible"
    modal
    header="Confirm Delete"
    :style="{ width: '25rem' }"
  >
    <span class="p-text-secondary block mb-5 mt-4"
      >Are you sure to delete selected rows?</span
    >
    <div class="flex justify-content-end gap-2">
      <Button
        type="button"
        label="Cancel"
        severity="secondary"
        @click="cfClose"
      ></Button>
      <Button
        type="button"
        severity="danger"
        raised
        label="Delete"
        :loading="props.confirm.loading"
        :disabled="props.confirm.loading"
        @click="cfDelete"
      ></Button>
    </div>
  </Dialog>
</template>
<script setup>
const props = defineProps({
  confirm: {
    type: Object,
    default: {
      visible: false,
      loading: false,
    },
  },
});
const emit = defineEmits(["confClose", "confDelete"]);
const cfClose = () => {
  emit("confClose");
};
const cfDelete = () => {
  emit("confDelete");
};
</script>