<template>
    <div class="MockupText" :class="[ ...modifiersMap ]">
        <div
            v-for="line in displayedLines"
            class="MockupText_line MockupElement_shape"
            :style="{ '--width': line.width + '%' }"
            :key="line.id"
        ></div>
    </div>
</template>

<script>
import { ModifiersMap } from '@studapart/core'

export default {
    name: 'MockupText',
    mixins: [ ModifiersMap ],
    props: {
        lines: { type: Number, default: 5 },
        modifiers: { type: Array, default: () => [] },
        widthRange: { type: Array, default: () => [50, 100] }
    },
    computed: {
        displayedLines () {
            let lines = []

            for (let i = 0; i < this.$props.lines; i++) {
                lines.push({
                    id: i,
                    width: Math.floor(Math.random() * (this.$props.widthRange[1] - this.$props.widthRange[0] + 1)) + this.$props.widthRange[0]
                })
            }

            return lines
        }
    }
}
</script>