import React from 'react';

interface ControlPanelProps {
  isDualMode: boolean;
  setDualMode: (val: boolean) => void;
  isAttached: boolean;
  setIsAttached: (val: boolean) => void;
  children?: React.ReactNode;
}

const ControlPanel: React.FC<ControlPanelProps> = ({
  isDualMode,
  setDualMode,
  isAttached,
  setIsAttached,
  children
}) => {
  return (
    <div className="bg-gray-850 p-4 border-b border-gray-800 shadow-md z-20">
      <div className="flex flex-col md:flex-row gap-4 items-center md:items-stretch">
        
        {/* Left Column: Brand & Controls */}
        <div className="flex flex-col gap-3 shrink-0 md:w-auto">
            {/* Brand */}
            <div className="flex items-center gap-3">
                <div className="w-10 h-10 bg-indigo-600 rounded-lg flex items-center justify-center shadow-lg shadow-indigo-900/50 shrink-0">
                   <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
                   </svg>
                </div>
                <div>
                  <h1 className="text-xl font-bold text-white tracking-tight leading-tight">SerialNexus</h1>
                  <span className="text-xs text-indigo-400 font-medium block">Bypass & Monitor</span>
                </div>
            </div>

             {/* Controls Row */}
            <div className="flex items-center gap-3">
                {/* Dual Monitor Toggle */}
                <div className={`flex items-center gap-3 p-2 pl-3 rounded-lg border transition-all duration-300 w-48 ${
                isDualMode ? 'bg-gray-900 border-indigo-500/50 shadow-[0_0_15px_rgba(79,70,229,0.1)]' : 'bg-gray-900/50 border-gray-800'
                }`}>
                <label className="flex items-center cursor-pointer select-none w-full">
                    <div className="relative shrink-0">
                    <input 
                        type="checkbox" 
                        className="sr-only" 
                        checked={isDualMode} 
                        onChange={(e) => setDualMode(e.target.checked)} 
                    />
                    <div className={`block w-9 h-5 rounded-full transition-colors ${isDualMode ? 'bg-indigo-600' : 'bg-gray-700'}`}></div>
                    <div className={`absolute left-1 top-1 bg-white w-3 h-3 rounded-full transition-transform ${isDualMode ? 'translate-x-4' : 'translate-x-0'}`}></div>
                    </div>
                    <div className={`ml-2 text-xs font-bold ${isDualMode ? 'text-indigo-300' : 'text-gray-500'}`}>
                    DUAL MONITOR
                    </div>
                </label>
                </div>

                {/* Attach Button */}
                <button
                    onClick={() => setIsAttached(!isAttached)}
                    disabled={!isDualMode}
                    className={`flex items-center justify-center gap-2 px-4 py-2 rounded-lg border text-xs font-bold transition-all duration-300 ${
                        !isDualMode 
                            ? 'opacity-50 cursor-not-allowed bg-gray-900 border-gray-800 text-gray-600'
                            : isAttached
                                ? 'bg-green-900/30 border-green-500/50 text-green-400 shadow-[0_0_10px_rgba(34,197,94,0.2)]'
                                : 'bg-gray-900 border-gray-700 text-gray-400 hover:border-gray-500 hover:text-gray-300'
                    }`}
                >
                    <div className={`w-2 h-2 rounded-full ${isAttached && isDualMode ? 'bg-green-500 animate-pulse' : 'bg-gray-600'}`}></div>
                    {isAttached ? 'ATTACHED' : 'ATTACH'}
                </button>
            </div>
        </div>

        {/* Right Column: Sponsor Space */}
        <div className="flex-1 w-full flex justify-center md:justify-end items-center">
           {children}
        </div>
      </div>
    </div>
  );
};

export default ControlPanel;