import React from "react";
import { FaUserCircle } from "react-icons/fa";
import { useNavigate } from "react-router-dom"; // Import for navigation
import "./Navbar.css"; // Navbar-specific styles

const Navbar = () => {
  const navigate = useNavigate(); // Hook for navigation

  const goToConsolidatedPage = () => {
    navigate("/consolidated"); // Route to the consolidated page
  };

  return (
    <header className="navbar">
      <div className="navbar-container">
        <FaUserCircle className="user-icon" />
        <button
          className="consolidated-button"
          onClick={goToConsolidatedPage}
        >
          Go to Consolidated Page
        </button>
      </div>
    </header>
  );
};

export default Navbar;