<template>
  <hr :class="[wrapperClass, dividerClasses]" />
</template>

<script>
import { defineComponent } from "vue";

export default defineComponent({
  name: "NDivider",
  props: {
    wrapperClass: {
      type: String,
      default: "",
    },
    spacing: {
      type: String,
      default: "6",
    },
    vertical: {
      type: Boolean,
      default: false,
    },
  },
  computed: {
    dividerClasses() {
      const { spacing, vertical } = this;
      let classes = `pkg-base-n-divider n-bg-main-font`;

      if (vertical) {
        classes += ` n-divider--vertical n-mx-${spacing}`;
      } else {
        classes += ` n-my-${spacing}`;
      }

      return classes;
    },
  },
});
</script>

<style scoped>
.pkg-base-n-divider {
  height: 1px;
  opacity: 0.2;
}

.pkg-base-n-divider.n-divider--vertical {
  width: 1px;
  height: inherit;
}
</style>
