<template>
  <view class="flex items-center justify-between px-[40rpx] mt-[56rpx] cursor-pointer" @tap="handleClick">
    <view class="flex items-center">
      <view class="w-[96rpx] h-[96rpx] mr-[32rpx] flex items-center justify-center bg-gray-50 rounded-full">
        <IconFont :name="icon" class="text-blue-600" size="32" />
      </view>
      <view class="flex flex-col">
        <text class="text-[#1f2937] text-[28rpx] font-normal leading-[40rpx]">{{ title }}</text>
        <text class="text-[#6b7280] text-[24rpx] mt-[8rpx] leading-[32rpx]">{{ subtitle }}</text>
      </view>
    </view>
    <IconFont name="RectRight" class="text-gray-400" size="16" />
  </view>
</template>

<script setup>
import IconFont from './IconFont.vue'

/**
 * Section Item Component
 * @description 单个展示项目组件，包含图标、标题、副标题和右侧箭头
 */
defineProps({
  /**
   * 图标名称（对应 IconFont 组件的 name）
   * @example 'Edit', 'Check', 'Order'
   */
  icon: {
    type: String,
    required: true
  },
  /**
   * 标题
   */
  title: {
    type: String,
    required: true
  },
  /**
   * 副标题/描述
   */
  subtitle: {
    type: String,
    default: ''
  },
  /**
   * 路由路径（可选，用于跳转）
   */
  route: {
    type: String,
    default: ''
  }
})

const emit = defineEmits(['click'])

/**
 * 处理点击事件
 */
const handleClick = () => {
  emit('click')
}
</script>

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