mini-starter/mini-ui-packages/rencai-settings-ui/src/components/UserProfileSummary.tsx

import React from 'react'
import { View, Text } from '@tarojs/components'
import type { UserProfile } from '../types/settings'

interface UserProfileSummaryProps {
  /** 用户信息 */
  profile: UserProfile
}

/**
 * 用户信息摘要组件
 * 显示用户头像、姓名、残疾类型和统计数据
 * 原型参考: docs/小程序原型/rencai.html (行770-906)
 */
export const UserProfileSummary: React.FC<UserProfileSummaryProps> = ({ profile }) => {
  // 获取姓名首字作为头像
  const avatarText = profile.name?.charAt(0) || ''

  return (
    <View className="bg-white border-b border-gray-200">
      {/* 用户头像和基本信息 */}
      <View className="flex flex-row items-center p-4 mb-4">
        {/* 圆形头像 */}
        <View className="w-16 h-16 rounded-full bg-blue-500 flex items-center justify-center mr-4">
          <Text className="text-white text-xl font-bold">{avatarText}</Text>
        </View>

        {/* 姓名和残疾类型 */}
        <View className="flex flex-col">
          <Text className="font-semibold text-gray-800 text-base">{profile.name}</Text>
          <Text className="text-sm text-gray-500 mt-1">
            {profile.disabilityType} · {profile.disabilityLevel}
          </Text>
        </View>
      </View>

      {/* 3列统计数据 */}
      <View className="flex flex-row justify-around pb-4">
        {/* 本月出勤 */}
        <View className="flex flex-col items-center">
          <Text className="text-xl font-bold text-gray-800">{profile.stats.thisMonthAttendance}</Text>
          <Text className="text-xs text-gray-500 mt-1">本月出勤</Text>
        </View>

        {/* 累计出勤 */}
        <View className="flex flex-col items-center">
          <Text className="text-xl font-bold text-gray-800">{profile.stats.totalAttendance}</Text>
          <Text className="text-xs text-gray-500 mt-1">累计出勤</Text>
        </View>

        {/* 本月薪资 */}
        <View className="flex flex-col items-center">
          <Text className="text-xl font-bold text-gray-800">
            ¥{profile.stats.thisMonthSalary.toLocaleString()}
          </Text>
          <Text className="text-xs text-gray-500 mt-1">本月薪资</Text>
        </View>
      </View>
    </View>
  )
}