<template>
  <view class="mt-[30rpx] bg-white rounded-[20rpx] p-[30rpx]">
    <TitleBar :title="title" />

    <view v-for="(item, index) in items" :key="index" class="suggestion-item">
      <view class="text-[32rpx] font-700">{{ item.title }}</view>
      <view class="mt-[20rpx] text-left" v-for="sonItem in item.items">
        <view class="text-[#000] text-[26rpx] font-700">{{ sonItem.title }}</view>
        <view class="mt-[10rpx] text-[26rpx] text-[#666]">
          {{ sonItem.description }}
        </view>
      </view>
      <view class="text-[26rpx] font-400 mt-[10rpx] text-[#666]">
        {{ item.description instanceof Array ? item.description.join(',') : item.description }}
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import TitleBar from './TitleBar.vue'
defineProps({
  items: {
    type: Array<{
      title: string
      description?: string | []
      items?: { title: string; description?: string }[]
    }>,
    default: () => [],
  },
  title: {
    type: String,
    default: '',
  },
})
</script>

<style lang="scss" scoped>
.suggestion-item {
  &:not(:last-child) {
    margin-bottom: 50rpx;
  }

  &:first-child {
    margin-top: 30rpx;
  }
}
</style>
