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

const { visible, toggle } = baseAlert();

defineProps({
  message: {
    type: String,
    default: "",
  },
  title: {
    type: String,
    default: "İşlem Başarısız",
  },
});

defineExpose({
  toggle,
});
</script>
<template>
  <MdrAlert
    v-model="visible"
    :title="title"
    class="bg-red-100 border-red-600 text-red-600 w-80 sm:w-96"
    animate
  >
    <template #icon>
      <ExclamationTriangleIcon class="size-6 text-red-600" />
    </template>
    <template v-if="message">
      {{ message }}
    </template>
  </MdrAlert>
</template>
