/**
 * 打卡明细列表组件
 * 显示打卡记录列表，按日期倒序排列
 */
import React from 'react'
import { View, Text } from '@tarojs/components'
import { AttendanceDetailsProps } from '../types/attendance'
import { AttendanceRecordItem } from './AttendanceRecordItem'

export const AttendanceDetails: React.FC<AttendanceDetailsProps> = ({ records }) => {
  return (
    <View className="bg-white rounded-lg p-4 mb-4 mx-4 flex flex-col">
      <Text className="font-semibold text-gray-700 mb-3 text-base">打卡明细</Text>

      {/* 列表容器 - 垂直布局 */}
      <View className="flex flex-col space-y-3">
        {records.map((record) => (
          <AttendanceRecordItem key={record.date} record={record} />
        ))}
      </View>
    </View>
  )
}
