Navbar.js

import React, { useState } from "react";
import { Link } from "react-router-dom";
import "../components/Navbar.css"; // ✅ Ensure CSS path is correct
import SellForm from "../components/SellForm"; // ✅ Corrected Import

const Navbar = ({ username, onLogout }) => {
  const [isSellModalOpen, setSellModalOpen] = useState(false);

  return (
    <>
      <nav className="navbar">
        <div className="nav-left">
          <Link to="/" className="nav-logo">Ecobuy</Link>
          <Link to="/" className="nav-item">Home</Link>
          <button 
            className="nav-item sell-button" 
            onClick={() => setSellModalOpen(true)}
          >
            Sell
          </button>
          <Link to="/categories" className="nav-item">Categories</Link>
          <Link to="/cart" className="nav-item">🛒 Cart</Link>
        </div>
        
        <div className="nav-right">
          <span className="username">{username}</span>
          <button className="logout-button" onClick={onLogout}>Logout</button>
        </div>
      </nav>

      {/* ✅ Sell Form Modal - Opens when Sell button is clicked */}
      {isSellModalOpen && <SellForm onClose={() => setSellModalOpen(false)} />}
    </>
  );
}; 

export default Navbar;