/**
 * 考勤统计卡片组件
 * 显示出勤率、正常出勤天数、异常统计
 */
import React from 'react'
import { View, Text } from '@tarojs/components'
import { AttendanceStatsProps } from '../types/attendance'

export const AttendanceStats: React.FC<AttendanceStatsProps> = ({ stats }) => {
  return (
    <View className="bg-white rounded-lg p-4 mb-4 mx-4 flex flex-col">
      {/* 两列统计布局 */}
      <View className="flex justify-between items-center mb-4">
        <View>
          <Text className="text-gray-700 text-sm">出勤率</Text>
          <Text className="text-2xl font-bold text-gray-800">{stats.attendanceRate}%</Text>
        </View>
        <View className="text-right">
          <Text className="text-gray-700 text-sm">正常出勤</Text>
          <Text className="text-2xl font-bold text-gray-800">{stats.normalDays}天</Text>
        </View>
      </View>

      {/* 异常统计 */}
      <View className="flex justify-between text-xs text-gray-500">
        <Text>迟到: {stats.lateCount}次</Text>
        <Text>早退: {stats.earlyLeaveCount}次</Text>
        <Text>缺勤: {stats.absentCount}次</Text>
      </View>
    </View>
  )
}
