<template>
  <div
    v-for="item in cols"
    :key="item"
    :style="phRowHeight"
    class="ph-block"
  />
</template>

<script lang="ts">
import { defineComponent } from 'vue'

const DEFAULT_SIZE = '25px'

export default defineComponent({
  name: 'Square',
  props: {
    rowHeight: {
      type: [Number, String],
      default: undefined
    },
    cols: {
      type: Number,
      default: 1
    }
  },
  computed: {
    phRowHeight () {
      const height = this.rowHeight || DEFAULT_SIZE
      const width = this.rowHeight || DEFAULT_SIZE
      return {
        height,
        width
      }
    }
  }
})
</script>

<style lang="scss" scoped>
  .ph-block {
    @apply bg-skeleton-loader rounded-xs;
  }
</style>
