import React, { useState } from 'react';
import { Link, useNavigate } from 'react-router-dom';
import './Header.css';
import LoginRegister from './LoginRegister'; // Убедитесь, что импорт есть

function Header({ onLogin}) {
  const [isModalOpen, setIsModalOpen] = useState(false);
  const navigate = useNavigate();

  const handleLoginClick = () => {
    setIsModalOpen(true);
  };

  const handleCloseModal = () => {
    setIsModalOpen(false);
  };

  const handleOrderClick = () => {
    navigate('/delivery-form');
  };

  return (
    <header className="header">
      <div className="container">
        <div className="logo">
          <img src={process.env.PUBLIC_URL + '/images/Logo(Nav).svg'} alt="Изображение" />
          <span>QuickDrops</span>
        </div>
        <nav>
          <Link to="/">Home</Link>
          <Link to="/products">Products</Link>
          <Link to="/about">About</Link>
          <Link to="/contact">Contact</Link>
        </nav>
        <button className="login-button" onClick={handleLoginClick}>
          Log in
        </button>
        <button className="order-button" onClick={handleOrderClick}>
          Order
        </button>
      </div>
      <LoginRegister 
        isOpen={isModalOpen} 
        onClose={handleCloseModal} 
        onLogin={onLogin} 
      />
    </header>
  );
}

export default Header;
