/**
 * 就业历史项组件
 * 显示单条就业历史，带时间线样式
 */
import React from 'react'
import { View, Text } from '@tarojs/components'
import { EmploymentHistoryItem, WorkStatus, isCurrentWork, formatDateRange } from '../types/employment'

interface EmploymentHistoryItemProps {
  item: EmploymentHistoryItem
  isLast: boolean
}

export const EmploymentHistoryItemComponent: React.FC<EmploymentHistoryItemProps> = ({ item, isLast }) => {
  const currentWork = isCurrentWork(item.workStatus)
  const dotColor = currentWork ? 'bg-blue-500' : 'bg-gray-400'

  return (
    <View className="flex">
      {/* 时间线圆点+连线 */}
      <View className="flex flex-col items-center mr-3">
        <View className={`w-3 h-3 rounded-full ${dotColor}`} />
        {!isLast && <View className="w-0.5 h-full bg-gray-200 mt-1" />}
      </View>

      {/* 内容 */}
      <View className="flex-1 pb-4">
        <Text className="font-medium text-gray-800">{item.companyName || '未知企业'}</Text>
        <Text className="text-sm text-gray-500 mb-1">{item.orderName || item.positionName || '未知岗位'}</Text>
        <Text className="text-xs text-gray-500">{formatDateRange(item.joinDate, item.leaveDate)}</Text>
      </View>
    </View>
  )
}
