<template>
  <div class="kole-skeleton" :class="{ 'is-active': active }">
    <div v-if="avatar" class="kole-skeleton-row">
      <div class="kole-skeleton-avatar"></div>
      <div class="kole-skeleton-lines">
        <div class="kole-skeleton-line" style="width:40%"></div>
        <div class="kole-skeleton-line" style="width:80%"></div>
      </div>
    </div>
    <div v-if="block" class="kole-skeleton-block"></div>
    <div v-for="i in rows" :key="i" class="kole-skeleton-line" :style="{ width: lineWidth(i) }"></div>
  </div>
</template>

<script>
export default {
  name: 'KoleSkeletonPro',
  props: {
    rows: { type: Number, default: 3 },
    avatar: { type: Boolean, default: false },
    block: { type: Boolean, default: false },
    active: { type: Boolean, default: true }
  },
  methods: {
    lineWidth: function (i) { return (i % 2 === 0 ? 100 : 70) + '%'; }
  }
};
</script>

<style src="./SkeletonPro.css"></style>
