import React, { useState } from 'react';
import { Route, Routes } from 'react-router-dom';
import Header from './components/Header';
import Footer from './components/Footer';
import HeroSection from './components/HeroSection';
import AboutDelivery from './components/AboutDelivery';
import DeliveryOptions from './components/DeliveryOptions';
import MonitorDelivery from './components/MonitorDelivery';
import SecureCheckout from './components/SecureCheckout';
import ShippingDetails from './components/ShippingDetails';
import DeliveryForm from './components/DeliveryForm';
import OrderTracking from './components/OrderTracking';
import { users, addUser } from './mockData';
import LoginRegister from './components/LoginRegister'; // Import LoginRegister

import './App.css';

function Home() {
  return (
    <>
      <HeroSection />
      <AboutDelivery />
      <MonitorDelivery />
      <SecureCheckout />
      <DeliveryOptions />
      <ShippingDetails />
      <Footer />
    </>
  );
}

function App() {
  const [currentUser, setCurrentUser] = useState(null);

  const handleLogin = (user) => {
    setCurrentUser(user);
  };

  const handleLogout = () => {
    setCurrentUser(null);
  };

  return (
    <div className="App">
      <Header onLogin={handleLogin} /> {/* Pass handleLogin to Header */}
      {currentUser && (
        <div>
          <h2>Привет, {currentUser.name}</h2>
          <button onClick={handleLogout}>Выйти</button>
        </div>
      )}
      <Routes>
        {/* Parent Route */}
        <Route path="/" element={<Home />} />

        {/* Nested Routes */}
        <Route path="/delivery-form" element={<DeliveryForm />} />
        <Route path="/order-tracking" element={<OrderTracking />} />
      </Routes>
      <Footer />
    </div>
  );
}

export default App;
