<template>
  <q-dialog ref="dialogRef" @hide="onDialogHide">
    <q-card class="q-dialog-plugin" style="width: 100%; max-width: 400px">
      <q-card-section class="row items-center q-pb-none q-pt-md">
        <q-icon
          name="mdi-alert-circle"
          color="negative"
          size="28px"
          class="q-mr-sm"
        />
        <span class="text-h6">{{ props.title }}</span>
        <q-space />
        <q-btn icon="close" flat round dense @click="onDialogCancel" />
      </q-card-section>

      <q-card-section>
        <p class="q-my-sm">{{ props.message }}</p>
      </q-card-section>

      <q-card-actions align="right">
        <q-btn
          unelevated
          color="teal"
          text-color="white"
          label="CONFIRMAR"
          @click="onDialogOK"
        />
      </q-card-actions>
    </q-card>
  </q-dialog>
</template>

<script setup>
import { useDialogPluginComponent } from "quasar";

const props = defineProps({
  title: { type: String, required: true },
  message: { type: String, required: true },
});

defineEmits([...useDialogPluginComponent.emits]);

const { dialogRef, onDialogHide, onDialogOK, onDialogCancel } =
  useDialogPluginComponent();
</script>
