<template>
  <div class="sticky top-0 z-10 -mx-16 bg-transparent px-16 backdrop-blur-xl">
    <div
      :class="['flex flex-col items-start justify-between pt-4 pb-2 sm:max-w-full sm:flex-row sm:items-center sm:pb-1', customClasses]"
    >
      <div class="flex flex-col gap-3 mt-1">
        <h2 class="text-xl font-bold leading-7 text-gray-900 sm:mt-0 sm:truncate sm:text-xl">
          {{ title }}
        </h2>
        <p v-if="description" class="text-sm text-gray-500 max-w-xl" v-html="description"></p>
      </div>
      <div class="justify-self-end">
        <slot></slot>
        <div v-if="buttonType" class="mt-5 flex sm:mt-0 lg:mt-0 lg:ml-4">
          <span class="relative sm:ml-3">
            <c-button
              :label="buttonType.label"
              :icon="buttonType.icon"
              :type="buttonType.type"
              :disabled="buttonType.isDisabled"
              :id="id"
              @action="emitAction"
              @mouseover.native="isTooltipVisible = true"
              @mouseleave.native="isTooltipVisible = false"
            ></c-button>
            <c-tool-tip
              v-if="isTooltipVisible && showTooltip"
              :tooltipText="buttonType.tooltipText"
              :isBottomAligned="true"
              color="#1f2937"
              classes="left-1/2 -translate-x-1/2 text-white bg-gray-800 w-56 mt-2 text-center"
            ></c-tool-tip>
          </span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import CButton from "../CButton/CButton.vue";
import CToolTip from "../CToolTip/CToolTip.vue";
export default {
  name: "CPageHeading",
  components: { CButton, CToolTip },
  props: {
    id: {
      type: String,
    },
    title: {
      type: String,
      required: true,
    },
    description: { type: String },
    helpVideo: {
      type: String,
    },
    helpArticle: { type: String },
    buttonType: { type: Object },
    callAction: {
      type: Function,
    },
    showTooltip: {
      type: Boolean,
      default: false,
    },
    customClasses: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      isTooltipVisible: false,
    };
  },
  methods: {
    emitAction() {
      this.$emit("callAction");
    },
  },
};
</script>
