export default function VideoCard({ video, index, onClick }) {
  return (
    <div
      onClick={onClick}
      className="group cursor-pointer rounded-xl overflow-hidden bg-white shadow-sm border border-amber-100 hover:shadow-lg hover:border-amber-300 transition-all duration-300 hover:-translate-y-1 opacity-0 animate-fade-in"
      style={{ animationDelay: `${Math.min(index * 60, 600)}ms` }}
    >
      {/* Thumbnail */}
      <div className="relative aspect-video overflow-hidden bg-amber-100">
        <img
          src={video.thumbnailPath}
          alt={video.title}
          className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
          loading="lazy"
        />
        <span className="absolute bottom-2 right-2 bg-black/75 text-white text-xs px-1.5 py-0.5 rounded">
          {video.duration}
        </span>
      </div>

      {/* Info */}
      <div className="p-3">
        <h3 className="font-medium text-sm text-gray-900 line-clamp-2 group-hover:text-amber-700 transition-colors">
          {video.title}
        </h3>
        <div className="mt-1.5 flex items-center justify-between text-xs text-gray-500">
          <span className="text-amber-600 font-medium">{video.category}</span>
          <span>{video.views.toLocaleString()} views</span>
        </div>
        <p className="text-xs text-gray-400 mt-1">
          {new Date(video.date).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })}
        </p>
      </div>
    </div>
  )
}
