<script setup>
import MdrAlert from "../MdrAlert.vue";
import { baseAlert } from "./compose.js";
import { QuestionMarkCircleIcon } from "@heroicons/vue/24/solid";

const { visible, toggle } = baseAlert();

const props = defineProps({
  message: {
    type: String,
    default: "Devam etmek istediğinize emin misiniz?",
  },
  title: {
    type: String,
    default: "Onay Gerekli",
  },
  onConfirm: {
    type: Function,
  },
  dismissable: {
    type: Boolean,
    default: true,
  },
});

defineExpose({
  toggle,
});

const confirm = async () => {
  toggle();
  await props.onConfirm();
};
</script>
<template>
  <MdrAlert
    v-model="visible"
    :title="title"
    class="bg-primary-100 text-primary-600 border-primary-600 w-80 sm:w-96"
    :dismissable="dismissable"
    animate
  >
    <template #icon>
      <QuestionMarkCircleIcon class="size-6 text-primary-600" />
    </template>
    <template v-if="message">
      {{ message }}
    </template>
    <template #actions>
      <button
        class="mr-2 py-2 px-3 rounded border border-primary-600 bg-primary-600 text-white"
        @click="confirm"
      >
        Evet
      </button>
      <button
        class="rounded border border-primary-600 bg-white py-2 px-3 text-primary-600"
        @click="toggle"
      >
        Hayır
      </button>
    </template>
  </MdrAlert>
</template>
