import React from 'react'
import { Edit, Trash2, User } from 'lucide-react'
import { Model } from '../services/modelService'
import ProjectImage from './ProjectImage'

interface ModelCardProps {
  model: Model
  onEdit: (model: Model) => void
  onDelete: (modelId: string) => void
}

const ModelCard: React.FC<ModelCardProps> = ({
  model,
  onEdit,
  onDelete
}) => {
  return (
    <div className="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden hover:shadow-md transition-shadow">
      {/* 模特图片 */}
      <div className="h-48 bg-gray-100 overflow-hidden relative">
        {model.model_image ? (
          <ProjectImage
            imagePath={model.model_image}
            alt={`模特 ${model.model_number}`}
            className="w-full h-full object-cover"
          />
        ) : (
          <div className="w-full h-full bg-gray-200 flex items-center justify-center">
            <User size={48} className="text-gray-400" />
          </div>
        )}
        
        {/* 操作按钮 */}
        <div className="absolute top-2 right-2 flex space-x-1">
          <button
            onClick={() => onEdit(model)}
            className="p-2 bg-white/80 text-gray-600 rounded-lg hover:bg-white hover:text-blue-600 transition-colors"
            title="编辑"
          >
            <Edit size={14} />
          </button>
          <button
            onClick={() => onDelete(model.id)}
            className="p-2 bg-white/80 text-gray-600 rounded-lg hover:bg-white hover:text-red-600 transition-colors"
            title="删除"
          >
            <Trash2 size={14} />
          </button>
        </div>
      </div>
      
      <div className="p-4">
        {/* 模特编号 */}
        <div className="text-center">
          <h3 className="text-lg font-semibold text-gray-900 mb-1">{model.model_number}</h3>
          <p className="text-xs text-gray-400">
            创建于 {new Date(model.created_at).toLocaleDateString()}
          </p>
        </div>
      </div>
    </div>
  )
}

export default ModelCard
