import React from 'react';
import { VideoHistoryItem } from '../types';
import { Calendar, Film } from 'lucide-react';

interface VideoGalleryProps {
  videos: VideoHistoryItem[];
}

export const VideoGallery: React.FC<VideoGalleryProps> = ({ videos }) => {
  return (
    <div className="w-full max-w-7xl mx-auto px-4 py-12">
      <h2 className="text-3xl font-serif font-bold mb-8 text-white border-b border-white/10 pb-4">
        Your Creations
      </h2>
      
      {videos.length === 0 ? (
        <div className="text-center text-gray-500 py-12">
          <p>No videos found. Create your first campaign above!</p>
        </div>
      ) : (
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
          {videos.map((video) => (
            <div 
              key={video.id} 
              className="group relative bg-glass backdrop-blur-md border border-glassBorder rounded-xl overflow-hidden hover:border-blue-500/50 transition-all duration-300 hover:shadow-2xl hover:-translate-y-1"
            >
              {/* Video Thumbnail Area */}
              <div className="relative aspect-video bg-gray-900 overflow-hidden">
                {video.result_movie_url ? (
                  <video 
                    src={video.result_movie_url} 
                    className="w-full h-full object-cover"
                    controls
                    preload="metadata"
                  />
                ) : (
                  <div className="w-full h-full flex items-center justify-center bg-gray-800 text-gray-500">
                    <Film className="opacity-20" size={48} />
                  </div>
                )}
              </div>

              {/* Content Area */}
              <div className="p-4">
                <div className="flex items-center justify-between">
                   <div className="flex flex-col">
                      <span className="text-xs text-gray-400 uppercase tracking-wider mb-1">Created At</span>
                      <div className="flex items-center text-gray-200 text-sm font-mono">
                        <Calendar size={14} className="mr-2 text-blue-400" />
                        {video.created_at}
                      </div>
                   </div>
                   {video.status && (
                     <div className={`px-2 py-1 rounded text-xs font-bold uppercase ${
                       video.status.toLowerCase() === 'completed' ? 'bg-green-500/20 text-green-400' : 'bg-yellow-500/20 text-yellow-400'
                     }`}>
                       {video.status}
                     </div>
                   )}
                </div>
              </div>
            </div>
          ))}
        </div>
      )}
    </div>
  );
};