<script setup>
import { defineProps, useSlots } from 'vue';
const props = defineProps(['width', 'height', 'skeleton', 'isSkeleton', 'skeletonLines', 'skeletonClass']);
</script>

<template>
  <div v-if="props.isSkeleton">
    <div v-if="props.skeleton">{{ props.skeleton }}</div>
    <div v-else>
      <!-- Skeleton based on the width and height -->
      <div>
        <div class="skeleton-lines">
          <div v-for="line in props.skeletonLines ?? 1" :style="{ 'width': props.width, 'height': props.height }" :class="props.skeletonClass"></div>
        </div>
      </div>
    </div>
  </div>
  <span v-else><slot></slot></span>
</template>

<style scoped>

</style>