import React, { useState } from 'react';
import Dashboard from './components/Dashboard';
import CreateProject from './components/CreateProject';
import ProjectView from './components/ProjectView';
import './App.css';

function App() {
  const [currentView, setCurrentView] = useState('dashboard');
  const [selectedProjectId, setSelectedProjectId] = useState(null);

  const handleCreateProject = () => {
    setCurrentView('create');
  };

  const handleViewProject = (projectId) => {
    setSelectedProjectId(projectId);
    setCurrentView('project');
  };

  const handleBackToDashboard = () => {
    setCurrentView('dashboard');
    setSelectedProjectId(null);
  };

  const handleProjectCreated = (project) => {
    setCurrentView('dashboard');
  };

  return (
    <div className="min-h-screen bg-gray-50">
      <div className="container mx-auto px-4 py-8">
        {currentView === 'dashboard' && (
          <Dashboard
            onCreateProject={handleCreateProject}
            onViewProject={handleViewProject}
          />
        )}
        
        {currentView === 'create' && (
          <CreateProject
            onBack={handleBackToDashboard}
            onProjectCreated={handleProjectCreated}
          />
        )}
        
        {currentView === 'project' && selectedProjectId && (
          <ProjectView
            projectId={selectedProjectId}
            onBack={handleBackToDashboard}
          />
        )}
      </div>
    </div>
  );
}

export default App;