<template>
  <p class="ma-0" :style="heading">
    <slot></slot>
  </p>
</template>

<script>
export default {
  name: "heading",
  props: {
    ts: Object,
    ls: Object,
    d: Boolean,
  },
  computed: {
    heading() {
      const { ts, ls, d } = this;
      return {
        fontFamily: d ? ts.fontFamily : ls.fontFamily,
        fontWeight: d ? ts.fontWeight : ls.fontWeight,
        textAlign: d ? ts.textAlignment : ls.textAlignment,
        fontSize: (d ? ts.fontSize : ls.fontSize) + "px",
        color: d ? ts.textColor : ls.textColor,
        paddingTop: (d ? ts.padding.top : ls.padding.top) + "px",
        paddingBottom: (d ? ts.padding.bottom : ls.padding.bottom) + "px",
        paddingRight: (d ? ts.padding.right : ls.padding.right) + "px",
        paddingLeft: (d ? ts.padding.left : ls.padding.left) + "px",
      };
    },
  },
};
</script>

<style scoped></style>
