<template>
  <div
    :class="[
      'pkg-base-n-dialog-header n-align-center n-flex n-justify-between',
      wrapperClass,
    ]"
  >
    <slot :close="closeDialog">
      <h6 class="n-text-h6 n-color-main-font n-font-bold">
        {{ title }}
      </h6>
    </slot>

    <slot name="dismiss" :close="closeDialog">
      <button class="n-cursor-pointer" @click="closeDialog">
        <n-icon name="n-icon-add n-modal-cancel-icon" size="24" />
      </button>
    </slot>
  </div>
</template>

<script>
import { defineComponent } from "vue";
import NIcon from "../../NIcon/n-icon.vue";

export default defineComponent({
  name: "NDialogHeader",
  components: {
    NIcon,
  },
  provide() {
    return {
      closeDialog: this.onCloseModal,
      title: this.title,
    };
  },
  inject: ["title", "closeDialog"],
  props: {
    wrapperClass: {
      type: String,
      default: "",
    },
  },
});
</script>

<style scoped>
.pkg-base-n-dialog-header .n-modal-cancel-icon {
  transform: rotate(45deg);
}
</style>
