<template>
  <div class="bgo-divider" :style="dividerStyle"></div>
</template>

<script>
export default {
  name: 'BgoDivider',
  props: {
    bgColor: {
      type: String, 
      default: '#F8F8F8',
    },
    size: {
      type: String,
      default: 'md',
    }
  },
  computed: {
    dividerStyle() {
      let width = this.size

      switch(this.size) {
        case 'base':
          width = '4px';
          break;
        case 'xs':
          width = '8px';
          break;
        case 'sm':
          width = '12px';
          break;
        case 'md':
          width = '16px';
          break;
        case 'lg':
          width = '24px';
          break;
        case 'xl':
          width = '32px';
          break;
        default:
          width = this.size
      }

      return {
        backgroundColor: this.$props.bgColor,
        height: width,
      }
    }
  },
}
</script>