import { useState } from 'react';
import type { TraceMetadata } from './types/engine';
import ImportConvert from './views/ImportConvert';
import './App.css';

type ViewState = 'import' | 'canvas' | 'export';

function App() {
  const [view, setView] = useState<ViewState>('import');
  const [_svgResult, setSvgResult] = useState<string | null>(null);
  const [_traceMetadata, setTraceMetadata] = useState<TraceMetadata | null>(null);

  const handleUseThis = (svgOutput: string, metadata: unknown) => {
    setSvgResult(svgOutput);
    setTraceMetadata(metadata as TraceMetadata);
    setView('canvas');
  };

  return (
    <div id="app">
      {view === 'import' && <ImportConvert onUseThis={handleUseThis} />}
      {view === 'canvas' && <div className="placeholder-view">View 2: Design Canvas</div>}
      {view === 'export' && <div className="placeholder-view">View 3: Export</div>}
    </div>
  );
}

export default App;