<template>
  <view class="bg-white rounded-[32rpx] mb-[32rpx] pb-[56rpx] overflow-hidden shadow-sm">
    <!-- Section Header -->
    <view v-if="title" class="px-[40rpx] py-[32rpx]" :style="{ background: computedBgGradient }">
      <text class="text-[#1f2937] text-[32rpx] font-normal">{{ title }}</text>
    </view>

    <!-- Section Items -->
    <view class="flex flex-col">
      <view v-for="(item, index) in items" :key="index" class="flex flex-col">
        <SectionItem
          :icon="item.icon"
          :title="item.title"
          :subtitle="item.subtitle"
          :route="item.route"
          @click="handleItemClick(item)"
        />
        <!-- Divider -->
        <view v-if="index < items.length - 1" class="w-[626rpx] h-[2rpx] bg-[#e5e7eb] mx-auto mt-[32rpx]"></view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { computed } from 'vue'
import SectionItem from './SectionItem.vue'

/**
 * Section Card Component
 * @description 可复用的分组卡片组件，用于展示带标题的项目列表
 */
const props = defineProps({
  /**
   * Section 标题
   */
  title: {
    type: String,
    default: ''
  },
  /**
   * Section 背景渐变色（可选）
   * @example 'linear-gradient(90deg, #F3E8FF 0%, #E9D5FF 100%)'
   * @description 如果不传，则使用默认的浅蓝色渐变
   */
  bgGradient: {
    type: String,
    default: ''
  },
  /**
   * 项目列表
   * @example [{ icon: 'Edit', title: '标题', subtitle: '副标题', route: '/page/path' }]
   */
  items: {
    type: Array,
    required: true,
    default: () => []
  }
})

const emit = defineEmits(['item-click'])

/**
 * 默认的卡片渐变背景色
 * @description 统一的浅蓝色渐变，用于所有卡片
 */
const DEFAULT_GRADIENT = 'linear-gradient( 90deg, #EFF6FF 0%, #DBEAFE 100%)'

/**
 * 计算最终的背景渐变色
 * @description 如果传入了 bgGradient 则使用传入的，否则使用默认渐变
 */
const computedBgGradient = computed(() => {
  return props.bgGradient || DEFAULT_GRADIENT
})

/**
 * 处理项目点击
 * @param {Object} item - 点击的项目数据
 */
const handleItemClick = (item) => {
  emit('item-click', item)
}
</script>

<script>
export default {
  name: 'SectionCard'
}
</script>