<script setup>
import { computed } from "vue";

const props = defineProps({
  title: {
    type: String,
    default: "",
  },
  lines: {
    type: Array,
    default: () => [],
  },
});

const previewLines = computed(() => {
  return props.lines.map((line) => String(line || "").trim()).filter(Boolean);
});
</script>

<template>
  <view class="difficulty-preview">
    <image
      class="difficulty-preview__bg"
      src="/static/training-difficulty-design/text.png"
      mode="widthFix"
    />
    <view class="difficulty-preview__content">
      <text class="difficulty-preview__title">{{ title }}</text>
      <view class="difficulty-preview__copy">
        <text
          v-for="(line, index) in previewLines"
          :key="`${line}-${index}`"
          class="difficulty-preview__line"
        >
          {{ line }}
        </text>
      </view>
    </view>
  </view>
</template>

<style scoped>
.difficulty-preview {
  position: relative;
  width: 100%;
}

.difficulty-preview__bg {
  display: block;
  width: 100%;
}

.difficulty-preview__content {
  position: absolute;
  top: 28rpx;
  left: 30rpx;
  box-sizing: border-box;
  width: 486rpx;
}

.difficulty-preview__title {
  display: block;
  color: #ffd543;
  font-size: 24rpx;
  line-height: 34rpx;
  font-family: "PingFang SC", sans-serif;
  text-align: center;
}

.difficulty-preview__copy {
  width: 80%;
  margin: 0 auto;
  display: block;
  color: #ffffff;
  font-size: 24rpx;
  line-height: 34rpx;
  font-family: "PingFang SC", sans-serif;
  text-align: center;
}

.difficulty-preview__line {
  display: block;
}


</style>
