<template>
  <div class="ps-box">
    <div class="ps-box__title">
      <div :class="['ps-box__title--text', `is-${titlePosition}`]">
        <slot name="title">
          {{ title }}
        </slot>
      </div>
    </div>

    <div class="ps-box__body" :style="bodyStyle">
      <slot></slot>
    </div>
  </div>
</template>
<script lang='ts'>
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'PsBox',
  props: {
    title: {
      type: String,
      default: '',
    },
    titlePosition: {
      type: String,
      default: 'left',
      validator(val: string): boolean {
        return ['left', 'center', 'right'].indexOf(val) !== -1
      },
    },
    bodyStyle: {
      type: [String, Object, Array],
      default: '',
    },
  },
  setup(props) {
    // init here
  },
})
</script>
