<template>
  <div :class="containerClass">
    <slot />
  </div>
</template>

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

type ContainerLayoutSize = 'small' | 'medium' | 'large'

@Component({
  name: 'container-layout'
})
export default class Container extends Vue {
  @Prop({ default: 'medium' }) readonly vspace!: ContainerLayoutSize
  @Prop({ default: 'medium' }) readonly hspace!: ContainerLayoutSize

  get containerClass () {
    return {
      'is-vsmall': this.vspace === 'small',
      'is-vmedium': this.vspace === 'medium',
      'is-vlarge': this.vspace === 'large',
      'is-hsmall': this.hspace === 'small',
      'is-hmedium': this.hspace === 'medium',
      'is-hlarge': this.hspace === 'large'
    }
  }
}
</script>

<style lang="scss" scoped>
$padding-small: 1rem;
$padding-medium: 2rem;
$padding-large: 3rem;

.is-vsmall {
  padding-top: $padding-small;
  padding-bottom: $padding-small;
}

.is-vmedium {
  padding-top: $padding-medium;
  padding-bottom: $padding-medium;
}

.is-vlarge {
  padding-top: $padding-large;
  padding-bottom: $padding-large;
}

.is-hsmall {
  padding-left: $padding-small;
  padding-right: $padding-small;
}

.is-hmedium {
  padding-left: $padding-medium;
  padding-right: $padding-medium;
}

.is-hlarge {
  padding-left: $padding-large;
  padding-right: $padding-large;
}
</style>
