/**
 * 就业历史卡片组件
 * 显示就业历史时间线
 */
import React from 'react'
import { View, Text } from '@tarojs/components'
import { EmploymentHistoryItem } from '../types/employment'
import { EmploymentHistoryItemComponent } from './EmploymentHistoryItem'

interface EmploymentHistoryProps {
  history: EmploymentHistoryItem[]
  loading?: boolean
}

export const EmploymentHistory: React.FC<EmploymentHistoryProps> = ({ history, loading }) => {
  if (loading) {
    return (
      <View className="bg-white rounded-lg p-4 mb-4">
        <Text className="font-semibold text-gray-700 mb-3">就业历史</Text>
        <View className="flex items-center justify-center py-8">
          <Text className="text-gray-400">加载中...</Text>
        </View>
      </View>
    )
  }

  if (!history || history.length === 0) {
    return (
      <View className="bg-white rounded-lg p-4 mb-4">
        <Text className="font-semibold text-gray-700 mb-3">就业历史</Text>
        <View className="flex flex-col items-center justify-center py-8">
          {/* 暂无就业历史图标 - Heroicons clock */}
          <View className="i-heroicons-clock-20-solid text-gray-300 w-12 h-12 mb-3" />
          <Text className="text-gray-500 font-medium mb-1">暂无就业历史</Text>
          <Text className="text-gray-400 text-sm">还没有任何就业记录</Text>
        </View>
      </View>
    )
  }

  return (
    <View className="bg-white rounded-lg p-4 mb-4">
      <Text className="font-semibold text-gray-700 mb-3">就业历史</Text>

      <View className="flex flex-col space-y-4">
        {history.map((item, index) => (
          <EmploymentHistoryItemComponent
            key={`${item.orderId}-${index}`}
            item={item}
            isLast={index === history.length - 1}
          />
        ))}
      </View>
    </View>
  )
}
