(function() {
    // Import Icons
    const Play = window.createIcon('Play');
    const Star = window.createIcon('Star');
    const Users = window.createIcon('Users');
    const Heart = window.createIcon('Heart');
    const Clock = window.createIcon('Clock');

    const UICard = ({ item, onClick, onLike, isLiked }) => {
        // Fallback untuk warna gradient jika data kosong
        const gradient = item.imageColor || 'from-gray-800 to-black';

        return (
            <div 
                onClick={() => onClick && onClick(item)}
                className="group relative bg-[#1e1e2e] rounded-3xl overflow-hidden shadow-lg border border-white/5 cursor-pointer transform transition-all duration-300 hover:scale-[1.02] hover:shadow-purple-500/10 glass-card"
            >
                {/* Image Area */}
                <div className={`h-48 w-full bg-gradient-to-br ${gradient} relative`}>
                    <div className="absolute inset-0 bg-black/20 group-hover:bg-transparent transition duration-500"></div>
                    
                    {/* Top Right Stats */}
                    {item.stats && (
                        <div className="absolute top-3 right-3 bg-black/60 backdrop-blur-md px-2 py-1 rounded-lg text-[10px] text-white font-bold flex items-center gap-1 border border-white/10">
                            <Users className="w-3 h-3" /> {item.stats}
                        </div>
                    )}
                    
                    {/* Category Tag */}
                    <div className="absolute bottom-3 left-3 flex gap-2">
                        <span className="bg-white/90 text-black text-[10px] font-bold px-2 py-1 rounded shadow-sm uppercase tracking-wide">
                            {item.category || 'Umum'}
                        </span>
                    </div>

                    {/* Play Button Overlay */}
                    <div className="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition duration-300">
                        <div className="w-12 h-12 bg-white/20 backdrop-blur rounded-full flex items-center justify-center border border-white/40 scale-75 group-hover:scale-100 transition-transform">
                            <Play className="w-5 h-5 text-white fill-white ml-1" />
                        </div>
                    </div>
                </div>

                {/* Info Area */}
                <div className="p-5 relative">
                    <div className="flex justify-between items-start mb-2">
                        <div className="flex-1 pr-2">
                            <h4 className="font-bold text-white text-lg leading-tight mb-1 truncate">{item.title}</h4>
                            <p className="text-xs text-gray-400">by {item.creator || 'CFF Creator'}</p>
                        </div>
                        
                        {/* Like Button */}
                        <button 
                            onClick={(e) => {
                                e.stopPropagation();
                                onLike && onLike(item.id);
                            }}
                            className={`p-2 rounded-full transition active:scale-90 ${isLiked ? 'bg-pink-500/20 text-pink-500' : 'bg-white/5 text-gray-400 hover:bg-white/10'}`}
                        >
                            <Heart className={`w-5 h-5 ${isLiked ? 'fill-current' : ''}`} />
                        </button>
                    </div>
                    
                    {/* Footer Meta */}
                    <div className="flex items-center gap-4 mt-4 pt-4 border-t border-white/5">
                        {item.duration && (
                            <div className="flex items-center gap-1.5 text-xs text-gray-400">
                                <Clock className="w-3 h-3 text-purple-400" /> {item.duration}
                            </div>
                        )}
                        {item.rating && (
                            <div className="flex items-center gap-1.5 text-xs text-gray-400">
                                <Star className="w-3 h-3 text-yellow-400 fill-yellow-400" /> {item.rating}
                            </div>
                        )}
                        <div className="flex-1 text-right">
                            <span className="text-xs font-bold text-purple-400 group-hover:text-purple-300 transition">Detail &rarr;</span>
                        </div>
                    </div>
                </div>
            </div>
        );
    };

    // Expose Global
    window.UICard = UICard;
})();