<template>
  <div>
    <div :class="classes" class="border-gray-200">
      <div class="flex items-center justify-between">
        <div>
          <h3 class="text-base font-semibold text-gray-900" :class="headingClass">
            {{ heading }}
          </h3>
          <div class="flex items-center gap-1">
            <c-icon
            v-if="icon"
            :name="icon.name"
            :type="icon.type"
            :class="icon.class"
            :viewBox="icon.viewBox || '0 0 20 20'"
            ></c-icon>
            <p v-if="description" class="max-w-4xl text-sm text-gray-500">
              {{ description }}
            </p>
          </div>
        </div>
        <c-button
          v-if="tabAction"
          :type="tabAction.type"
          :label="tabAction.label"
          :icon="tabAction.icon"
          :id="id + '_action_button'"
          @action="emitTabAction"
        ></c-button>
        <c-anchor-tag
          v-if="tabLink"
          :label="tabLink.label"
          :action="emitTabLink"
          :id="id + '_action_link'"
        ></c-anchor-tag>
      </div>
    </div>
  </div>
</template>
<script>
import CAnchorTag from "../CAnchorTag/CAnchorTag.vue";
import CButton from "../CButton/CButton.vue";
import CIcon from '../CIcon/CIcon.vue';
export default {
  name: "CFormSectionHeading",
  components: { CButton, CAnchorTag, CIcon },
  props: {
    heading: { type: String, required: true },
    description: { type: String },
    divider: { type: Boolean },
    tabAction: { type: Object },
    tabLink: { type: Object },
    actionEvent: {
      type: Function,
    },
    classes: {
      type: String,
    },
    headingClass: {
      type: String,
      default: "",
    },
    icon: {
      type: Object,
    },
  },
  methods: {
    emitTabAction() {
      this.$emit("actionEvent");
    },
    emitTabLink() {
      this.$emit("actionEvent");
    },
  },
};
</script>
