<template>
  <component :is="level" class="heading" :class="styles">
    <slot></slot>
  </component>
</template>

<script>
import propMixins from '@/mixins/props.js'

export default {
  name: 'KmartHeading',
  mixins: [propMixins],
  props: {
    level: {
      type: String,
      default: 'h1',
      validator: value => {
        return value.match(/(h1|h2|h3|h4|h5|h6)/)
      }
    }
  }
}
</script>

<style lang="postcss">
.heading {
  @apply py-2 px-2;
}
</style>
