<script setup lang="ts">
import {computed} from "vue";
import {Modal} from "@/components";
import {useConfirmStore} from "./useConfirm";

const confirmStore = useConfirmStore();

const modalOpen = computed({
  get: () => confirmStore.open,
  set: value => {
    if (!value) {
      confirmStore.cancel();
    }
  },
});
</script>

<template>
  <Modal v-model:open="modalOpen">
    <div class="bg-slate-800 rounded pb-4 w-96">
      <span class="m-2">{{ confirmStore.options.title ?? "Confirm" }}</span>
      <hr />
      <div class="m-4">{{ confirmStore.options.message }}</div>
      <div class="flex justify-end">
        <button class="me-2" @click="confirmStore.cancel">{{ confirmStore.options.cancelLabel ?? "Cancel" }}</button>
        <button class="confirm me-4" :class="confirmStore.options.danger ? 'danger' : ''" @click="confirmStore.accept">{{ confirmStore.options.confirmLabel ?? "Confirm" }}</button>
      </div>
    </div>
  </Modal>
</template>

<style scoped>
@reference "@/style.css";

button.confirm {
  @apply border-emerald-500 bg-emerald-500 hover:bg-emerald-600;

  &.danger {
    @apply border-amber-900 bg-amber-900 hover:bg-amber-800;
  }
}
</style>