<template functional>
  <div
    class="hn-section-header__wrap"
    :style="{
      paddingRight: props.paddingRight
    }">
    <div class="hn-section-header--left">
      <div class="hn-section-header__title">
        <slot name="title">
          {{ props.title }}
        </slot>
      </div>
    </div>
    <div class="hn-section-header--right">
      <div class="hn-section-header__content">
        <slot name="right" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HnSectionHeader',
  props: {
    title: {
      type: String,
      default: ''
    },
    paddingRight: {
      type: String,
      default: '20px'
    }
  }
};
</script>
