import React, { useState, useEffect } from 'react';
import NodeEditor from './components/NodeEditor';
import PreviewPane from './components/PreviewPane';
import NodePanel from './components/NodePanel';
import './App.css';

function App() {
  const [activeTab, setActiveTab] = useState<'editor' | 'preview'>('editor');
  
  return (
    <div className="app">
      <header className="app-header">
        <h1>ComfyUI Rust - AMD GPU Accelerated</h1>
        <p>Image Generation with ROCm Support for RX 9070 XT</p>
      </header>
      
      <div className="main-content">
        <div className="sidebar">
          <NodePanel />
        </div>
        
        <div className="editor-area">
          <div className="tabs">
            <button 
              className={activeTab === 'editor' ? 'active' : ''}
              onClick={() => setActiveTab('editor')}
            >
              Node Editor
            </button>
            <button 
              className={activeTab === 'preview' ? 'active' : ''}
              onClick={() => setActiveTab('preview')}
            >
              Preview
            </button>
          </div>
          
          {activeTab === 'editor' ? (
            <NodeEditor />
          ) : (
            <PreviewPane />
          )}
        </div>
      </div>
    </div>
  );
}

export default App;