import React from 'react';
import { Link, useNavigate } from 'react-router-dom';
import './Header.css';

function Header() {
  const navigate = useNavigate();

  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="order-button" onClick={handleOrderClick}>
          Order
        </button>
      </div>
    </header>
  );
}

export default Header;
