<template>
  <div>
    <div class="field is-grouped">
      <div
        class="control is-expanded"
        v-html="content"
      ></div>
      <div class="control">
        <Icon
          name="material-symbols:check-circle-rounded"
          :size="24"
          class="has-text-success"
        />
      </div>
    </div>
    <div class="mt-3 mb-5"></div>
    <div class="field is-grouped">
      <div class="control is-expanded">
        <button
          class="button is-primary"
          @click="cancel()"
        >
          Đóng
        </button>
      </div>
      <div
        v-if="duration"
        class="control"
      >
        <CountDown
          :duration="duration"
          @close="cancel()"
        />
      </div>
    </div>
  </div>
</template>
<script setup>
const props = defineProps({
  content: String,
  duration: Number,
});

const emit = defineEmits(["close"]);

function cancel() {
  emit("close");
}
</script>
