components/ControlPanel.tsx

/**
 * @license
 * SPDX-License-Identifier: Apache-2.0
*/
import React, { useState } from 'react';
import InitialInputForm from './InitialInputForm';
import AiCoPilotPanel from './AiCoPilotPanel';
import type { InitialInput, ActiveEditor } from '../lib/types';

interface ControlPanelProps {
  onGenerate: (formData: InitialInput) => void;
  onClear: () => void;
  activeEditor: ActiveEditor | null;
  onRefine: (instruction: string) => void;
  isGenerating: boolean;
  isRefining: boolean;
}

type Tab = 'setup' | 'copilot';

export default function ControlPanel({ 
    onGenerate, 
    onClear, 
    activeEditor,
    onRefine,
    isGenerating,
    isRefining
}: ControlPanelProps) {
  const [activeTab, setActiveTab] = useState<Tab>('setup');

  return (
    <div className="control-panel">
      <div className="control-panel-tabs">
        <button 
            className={`control-panel-tab ${activeTab === 'setup' ? 'active' : ''}`}
            onClick={() => setActiveTab('setup')}
        >
            <i className="ph-note-pencil"></i> Initial Setup
        </button>
        <button 
            className={`control-panel-tab ${activeTab === 'copilot' ? 'active' : ''}`}
            onClick={() => setActiveTab('copilot')}
            disabled={!activeEditor}
            aria-disabled={!activeEditor}
        >
           <i className="ph-magic-wand"></i> AI Co-pilot
        </button>
      </div>

      <div className="tab-content">
        {activeTab === 'setup' && (
          <InitialInputForm
            onSubmit={onGenerate}
            onClear={onClear}
            disabled={isGenerating}
            isLoading={isGenerating}
          />
        )}
        {activeTab === 'copilot' && (
          <AiCoPilotPanel
            activeEditor={activeEditor}
            onRefine={onRefine}
            isLoading={isRefining}
          />
        )}
      </div>
    </div>
  );
}