<template>
    <div class="overflow-auto">
        <Skeleton :loading="loading" :row="5" row-width="[100%]">
            <div
                v-for="item in list"
                :key="item"
                class="text-center sentence"
                @click="$emit('useSentence', item)"
            >{{ item }}</div>
        </Skeleton>
    </div>
</template>
<script lang="ts" setup>
import { PropType, defineEmits } from "@vue/runtime-core";
import { Skeleton } from "vant"

defineEmits(["useSentence"])

defineProps({
    list: {
        type: Array as PropType<string[]>,
    },
    loading: Boolean
})

</script>

<style lang="less">
.sentence {
    height: 30px;
    line-height: 30px;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #1b1f37;
}
</style>