import React, { useState } from 'react';
import { Sidebar } from './components/Sidebar';
import { DashboardView } from './views/DashboardView';
import { DispatchingView } from './views/DispatchingView';
import { InventoryView } from './views/InventoryView';
import { TechniciansView } from './views/TechniciansView';
import { TimeTrackingView } from './views/TimeTrackingView';
import { SupabaseSyncView } from './views/SupabaseSyncView';

export const App: React.FC = () => {
  const [activeTab, setActiveTab] = useState('dashboard');

  const renderView = () => {
    switch (activeTab) {
      case 'dashboard':
        return <DashboardView />;
      case 'dispatching':
        return <DispatchingView />;
      case 'lager':
        return <InventoryView />;
      case 'monteure':
        return <TechniciansView />;
      case 'zeiterfassung':
        return <TimeTrackingView />;
      case 'supabase':
        return <SupabaseSyncView />;
      default:
        return <DashboardView />;
    }
  };

  return (
    <div className="app-container">
      <Sidebar activeTab={activeTab} setActiveTab={setActiveTab} />
      <main className="main-content">
        {renderView()}
      </main>
    </div>
  );
};

export default App;
