/**
 * File: VideoCard.tsx
 * Created by: AI Assistant
 * Date: 2025-12-05
 * Purpose: Video card component for kreatiVortex platform
 * Part of: kreatiVortex - Platform Pembelajaran Tari Online
 */

'use client';

import { Eye, User, Calendar } from 'lucide-react';
import VideoThumbnail from './VideoThumbnail';
import VideoActions from './VideoActions';

interface VideoData extends Record<string, unknown> {
  id: string;
  title: string;
  description: string;
  videoType: 'YOUTUBE' | 'LOCAL';
  videoUrl: string;
  viewCount: number;
  createdAt: string;
  isPublic: boolean;
  uploaderId: string;
  uploader: {
    user: {
      name: string;
    };
  };
}

interface VideoCardProps {
  video: VideoData;
  userProfile: any;
  onDelete: (videoId: string) => void;
}

function VideoCard({ video, userProfile, onDelete }: VideoCardProps) {

  return (
    <div className="bg-white/10 backdrop-blur-sm rounded-xl border border-white/20 overflow-hidden hover:bg-white/15 transition-all duration-300 group">
      {/* Video Thumbnail */}
      <VideoThumbnail video={video} />

      {/* Video Info */}
      <div className="p-4 sm:p-6">
        <div className="flex justify-between items-start mb-3">
          <h3 className="text-base sm:text-lg font-semibold text-white group-hover:text-gold-400 transition-colors line-clamp-2 flex-1 mr-2 sm:mr-3">
            {video.title}
          </h3>
          <div className="flex items-center text-xs sm:text-sm text-gray-400 whitespace-nowrap">
            <Eye className="w-3 h-3 sm:w-4 sm:h-4 mr-1" />
            {video.viewCount || 0}
          </div>
        </div>

        <p className="text-gray-300 text-xs sm:text-sm line-clamp-2 sm:line-clamp-3 mb-3 sm:mb-4">
          {video.description}
        </p>

        {/* Video Metadata */}
        <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between text-xs sm:text-sm text-gray-400 mb-3 sm:mb-4 space-y-2 sm:space-y-0">
          <div className="flex items-center">
            <User className="w-3 h-3 sm:w-4 sm:h-4 mr-1 sm:mr-2" />
            <span className="truncate max-w-[120px] sm:max-w-none">{video.uploader.user.name}</span>
          </div>
          <div className="flex items-center">
            <Calendar className="w-3 h-3 sm:w-4 sm:h-4 mr-1" />
            {new Date(video.createdAt).toLocaleDateString('id-ID', {
              year: 'numeric',
              month: 'short',
              day: 'numeric'
            })}
          </div>
        </div>

        {/* Video Actions */}
        <div className="pt-3 sm:pt-4 border-t border-gray-700">
          <VideoActions 
            video={video} 
            userProfile={userProfile} 
            onDelete={onDelete}
            variant="card"
          />
        </div>
      </div>
    </div>
  );
}

export default VideoCard;