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

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

export const TemplateListItem: React.FC<TemplateListItemProps> = ({
  template,
  onView,
  onDelete,
  formatDuration,
  formatDate
}) => {
  return (
    <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-4 hover:shadow-md transition-shadow">
      <div className="flex items-center justify-between">
        <div className="flex items-center space-x-4">
          {/* Thumbnail */}
          <div className="w-16 h-12 bg-gray-100 rounded flex items-center justify-center flex-shrink-0">
            {template.thumbnail_path ? (
              <img
                src={template.thumbnail_path}
                alt={template.name}
                className="w-full h-full object-cover rounded"
              />
            ) : (
              <Eye size={16} className="text-gray-400" />
            )}
          </div>

          {/* Info */}
          <div>
            <h3 className="font-medium text-gray-900">{template.name}</h3>
            <p className="text-sm text-gray-600">{template.description}</p>
          </div>
        </div>

        <div className="flex items-center space-x-4 text-sm text-gray-500">
          <span>{formatDuration(template.duration)}</span>
          <span>{template.material_count} 素材</span>
          <span>{template.track_count} 轨道</span>
          <span>{formatDate(template.created_at)}</span>
        </div>

        <div className="flex items-center space-x-2">
          <button
            onClick={() => onView(template)}
            className="p-2 text-blue-600 hover:text-blue-700"
          >
            <Eye size={16} />
          </button>
          <button
            onClick={() => onDelete(template.id)}
            className="p-2 text-red-600 hover:text-red-700"
          >
            <Trash2 size={16} />
          </button>
        </div>
      </div>
    </div>
  )
}
