client/src/components/Header.js

import React from 'react';
import { Link, useLocation } from 'react-router-dom';
import { Languages } from 'lucide-react';

const Header = () => {
  const location = useLocation();

  const isActive = (path) => {
    return location.pathname === path ? 'active' : '';
  };

  return (
    <header className="header">
      <div className="header-content">
        <Link to="/" className="logo">
          <Languages size={32} />
          <h1>Ad Reflections</h1>
        </Link>
        
        <nav className="nav">
          <Link to="/" className={isActive('/')}>
            Home
          </Link>
          <Link to="/browse" className={isActive('/browse')}>
            Browse
          </Link>
          <Link to="/random" className={isActive('/random')}>
            Random
          </Link>
          <Link to="/search" className={isActive('/search')}>
            Search
          </Link>
          <Link to="/manage" className={isActive('/manage')}>
            Manage
          </Link>
        </nav>
      </div>
    </header>
  );
};

export default Header;