import React from 'react'
import { Eye, Trash2 } from 'lucide-react'
import type { TemplateInfo } from '../../hooks/useProgressCommand'

interface TemplateCardProps {
  template: TemplateInfo
  onView: (template: TemplateInfo) => void
  onDelete: (templateId: string) => void
  formatDuration: (duration: number) => string
  formatDate: (date: string) => string
}

export const TemplateCard: React.FC<TemplateCardProps> = ({
  template,
  onView,
  onDelete,
  formatDuration,
  formatDate
}) => {
  return (
    <div className="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden hover:shadow-md transition-shadow">
      {/* Thumbnail */}
      <div className="aspect-video bg-gray-100 flex items-center justify-center">
        {template.thumbnail_path ? (
          <img
            src={template.thumbnail_path}
            alt={template.name}
            className="w-full h-full object-cover"
          />
        ) : (
          <div className="text-gray-400">
            <Eye size={32} />
          </div>
        )}
      </div>

      {/* Content */}
      <div className="p-4">
        <h3 className="font-medium text-gray-900 mb-2 line-clamp-1">
          {template.name}
        </h3>
        <p className="text-sm text-gray-600 mb-2 line-clamp-2">
          {template.description}
        </p>
        
        <div className="text-xs text-gray-500 space-y-1">
          <div>时长: {formatDuration(template.duration)}</div>
          <div>素材: {template.material_count} 个</div>
          <div>轨道: {template.track_count} 个</div>
          <div>创建: {formatDate(template.created_at)}</div>
        </div>

        {/* Actions */}
        <div className="flex items-center justify-between mt-3 pt-3 border-t border-gray-100">
          <button
            onClick={() => onView(template)}
            className="flex items-center gap-1 text-blue-600 hover:text-blue-700 text-sm"
          >
            <Eye size={14} />
            详情
          </button>
          <button
            onClick={() => onDelete(template.id)}
            className="flex items-center gap-1 text-red-600 hover:text-red-700 text-sm"
          >
            <Trash2 size={14} />
            删除
          </button>
        </div>
      </div>
    </div>
  )
}
