<template>
  <view class="usage-description">
    <text class="usage-text" v-for="(tip, index) in tips" :key="tip">{{ index + 1 }}. {{ tip }}</text>
  </view>
</template>

<script setup lang="ts">
defineProps({
  tips: {
    type: Array as () => string[],
    default: () => [],
  },
});
</script>

<style scoped>
.usage-description {
  background-color: #fff;
  border-radius: 20rpx;
  padding: 24rpx 30rpx;
  margin-top: 30rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.04);
}

.usage-text {
  display: block;
  font-size: 26rpx;
  color: #777;
  line-height: 1.65;
  margin-bottom: 10rpx;
}

.usage-text:last-child {
  margin-bottom: 0;
}
</style>
