<template>
  <span>
    <span :class="headingClass">
      <slot />
    </span>
  </span>
</template>

<script lang="ts">
import { Vue, Component, Prop } from 'vue-property-decorator'

type BaseHeadingSize = 'small' | 'medium' | 'large'

@Component({
  name: 'base-heading'
})
export default class BaseHeading extends Vue {
  @Prop({ default: 'medium' }) readonly size!: BaseHeadingSize

  get headingClass () {
    return {
      'title is-marginless': true,
      'is-5': this.size === 'small',
      'is-4': this.size === 'medium',
      'is-3': this.size === 'large'
    }
  }
}
</script>

<style lang="scss" scoped>
@import "../../core/base/bulma.scss";

$title-family: $revas-sans-serif;
@import "bulma/sass/elements/title.sass";
</style>
