'use client';

import { ReactNode } from 'react';

interface ExplorerCockpitProps {
  children: ReactNode;
}

export default function ExplorerCockpit({ children }: ExplorerCockpitProps) {
  return (
    <div className="relative">
      {/* Main explorer control panel */}
      <div className="bg-gradient-to-br from-gray-800 via-slate-800 to-gray-900 rounded-3xl p-8 border-4 border-amber-400 shadow-2xl animate-pulse-rainbow">
        
        {/* Control panel decorations */}
        <div className="absolute top-2 left-2 w-4 h-4 bg-green-500 rounded-full animate-pulse"></div>
        <div className="absolute top-2 right-2 w-4 h-4 bg-blue-500 rounded-full animate-pulse" style={{ animationDelay: '0.5s' }}></div>
        <div className="absolute bottom-2 left-2 w-4 h-4 bg-orange-500 rounded-full animate-pulse" style={{ animationDelay: '1s' }}></div>
        <div className="absolute bottom-2 right-2 w-4 h-4 bg-purple-500 rounded-full animate-pulse" style={{ animationDelay: '1.5s' }}></div>
        
        {/* Side control strips */}
        <div className="absolute left-0 top-1/4 w-2 h-1/2 bg-gradient-to-b from-emerald-400 to-teal-600 rounded-r-lg opacity-80"></div>
        <div className="absolute right-0 top-1/4 w-2 h-1/2 bg-gradient-to-b from-emerald-400 to-teal-600 rounded-l-lg opacity-80"></div>
        
        {/* Top control strip */}
        <div className="absolute top-0 left-1/4 right-1/4 h-2 bg-gradient-to-r from-amber-500 via-orange-500 to-amber-500 rounded-b-lg opacity-70"></div>
        
        {/* Explorer content */}
        <div className="relative z-10 min-h-[300px]">
          {children}
        </div>
        
        {/* Bottom scanner line */}
        <div className="absolute bottom-0 left-0 right-0 h-1 bg-gradient-to-r from-transparent via-emerald-400 to-transparent opacity-60 animate-pulse"></div>
      </div>
      
      {/* External control elements */}
      <div className="absolute -top-4 left-1/2 transform -translate-x-1/2 w-8 h-8 bg-gradient-to-br from-amber-400 to-orange-500 rounded-full border-2 border-white animate-pulse">
        <div className="w-full h-full rounded-full bg-gradient-to-br from-yellow-200 to-amber-400 animate-pulse flex items-center justify-center text-sm">
          🧠
        </div>
      </div>
      
      {/* Side indicators */}
      <div className="absolute top-1/2 -left-6 w-4 h-16 bg-gradient-to-b from-green-500 to-emerald-600 rounded-l-full opacity-70 animate-pulse"></div>
      <div className="absolute top-1/2 -right-6 w-4 h-16 bg-gradient-to-b from-green-500 to-emerald-600 rounded-r-full opacity-70 animate-pulse"></div>
    </div>
  );
}
