import React, { useState } from 'react';
import './App.css';
import PredefinedPuzzlePage from './pages/PredefinedPuzzlePage';
import CustomPuzzlePage from './pages/CustomPuzzlePage';

function App() {
  const [currentPage, setCurrentPage] = useState('predefined');

  const renderPage = () => {
    switch (currentPage) {
      case 'predefined':
        return <PredefinedPuzzlePage />;
      case 'custom':
        return <CustomPuzzlePage />;
      default:
        return <PredefinedPuzzlePage />;
    }
  };

  return (
    <div className="app-container">
      <header className="app-header">
        <h1>🦓 Zebra Puzzle Solver</h1>
        <p>Solve complex logic puzzles using AI-powered constraint satisfaction</p>
        
        {/* Navigation Tabs */}
        <nav className="page-navigation">
          <button 
            className={`nav-tab ${currentPage === 'predefined' ? 'active' : ''}`}
            onClick={() => setCurrentPage('predefined')}
          >
            📚 Predefined Puzzles
          </button>
          <button 
            className={`nav-tab ${currentPage === 'custom' ? 'active' : ''}`}
            onClick={() => setCurrentPage('custom')}
          >
            ✏️ Custom Puzzle
          </button>
        </nav>
      </header>

      {renderPage()}
    </div>
  );
}

export default App;