<template>
  <div class="skeleton-text-container">
    <SkeletonBlock 
        v-for="line in parseInt(lines)" 
        :key="line"
        :width="getWidth(line)"
        height="14px"
        margin="0 0 8px 0"
        borderRadius="4px"
    />
  </div>
</template>

<script setup>
import SkeletonBlock from './SkeletonBlock.vue';

const props = defineProps({
  lines: { type: [Number, String], default: 1 },
  lastWidth: { type: String, default: '70%' }
})

const getWidth = (line) => {
    if (parseInt(props.lines) > 1 && line === parseInt(props.lines)) {
        return props.lastWidth;
    }
    return '100%';
}
</script>
