<template>
  <div class="el-bio-title-second">
    <div
      class="bio-title-second"
      :class="{'noIcon': !iconName}"
      :style="{fontSize: `${fontSize}px`, fontWeight: fontWeightD}">
      <bio-icon
        class="bio-title-second__icon"
        v-if="iconName"
        :name="iconName"
        :color="iconColor">
      </bio-icon>
      <span class="content">
      <span class="content-icon" :style="{height: `${fontSize - 1}px`}"></span>
      <span class="content-text">{{text}}</span>
    </span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'BioTitleSecond',

  props: {
    text: String,

    iconName: {
      type: String,
      default: null
    },

    iconColor: {
      type: String
    },

    fontSize: {
      type: Number,
      default: 18
    },

    fontWeight: {
      type: Boolean,
      default: true
    }
  },

  data() {
    return {
      fontWeightD: this.fontWeight ? 'bold' : 'normal'
    };
  }
};
</script>
