"use client";
import React, { useState } from 'react';
import Luca from './Luca';
import Patrick from './Patrick';
import Yasin from './Yasin';
import './App.css'; // Import main styles

function MyApp() {
  // State to track the current view
  const [currentView, setCurrentView] = useState('landing');

  // Function to handle navigation
  const handleNavigation = (view: string) => {
    setCurrentView(view);
  };

  return (
    <div>
      {/* Header with navigation buttons */}
      <header className="header">
        <h1>Welcome to the Programmer Space</h1>
        <nav>
          <button onClick={() => handleNavigation('landing')}>Home</button>
          <button onClick={() => handleNavigation('luca')}>Luca</button>
          <button onClick={() => handleNavigation('patrick')}>Patrick</button>
          <button onClick={() => handleNavigation('yasin')}>Yasin</button>
        </nav>
      </header>

      <div className="content">
        {/* Conditionally render the selected component */}
        {currentView === 'landing' && <p>Welcome to our site! Choose a programmer's space above.</p>}
        {currentView === 'luca' && <Luca />}
        {currentView === 'patrick' && <Patrick />}
        {currentView === 'yasin' && <Yasin />}
      </div>
    </div>
  );
}

export default MyApp;