import React from 'react';
import { NavLink } from 'react-router-dom';

const Navbar = ({ onRefresh, showRefresh = true }) => {
  return (
    <header className="sticky top-0 z-50 glass-panel border-b border-[#222f49] backdrop-blur-md bg-[#0f172a]/80">
      <div className="max-w-7xl mx-auto px-6 py-4 flex items-center justify-between">
        <div className="flex items-center gap-8">
          <NavLink to="/" className="flex items-center gap-3 hover:opacity-80 transition-opacity">
            <div className="size-8 text-primary flex items-center justify-center">
              <span className="material-symbols-outlined !text-3xl">equalizer</span>
            </div>
            <h2 className="text-xl font-bold tracking-tight text-white">SonicStats</h2>
          </NavLink>
          
          <nav className="hidden md:flex items-center gap-1 bg-slate-800/50 p-1 rounded-lg border border-white/5">
            <NavLink 
              to="/" 
              className={({ isActive }) => 
                `px-4 py-1.5 rounded-md text-sm font-medium transition-all ${
                  isActive 
                    ? 'bg-primary text-white shadow-lg shadow-primary/25' 
                    : 'text-slate-400 hover:text-white hover:bg-white/5'
                }`
              }
            >
              Dashboard
            </NavLink>
            <NavLink 
              to="/archives" 
              className={({ isActive }) => 
                `px-4 py-1.5 rounded-md text-sm font-medium transition-all ${
                  isActive 
                    ? 'bg-primary text-white shadow-lg shadow-primary/25' 
                    : 'text-slate-400 hover:text-white hover:bg-white/5'
                }`
              }
            >
              Archives
            </NavLink>
          </nav>
        </div>

        <div className="flex items-center gap-4">
          {showRefresh && (
            <button 
              onClick={onRefresh}
              className="size-10 flex items-center justify-center rounded-xl bg-card-dark hover:bg-card-darker transition-colors text-white border border-[#222f49]"
              title="Refresh Data"
            >
              <span className="material-symbols-outlined text-[20px]">refresh</span>
            </button>
          )}
          <div className="size-10 rounded-full bg-cover bg-center border-2 border-[#222f49]" style={{ backgroundImage: "url('https://api.dicebear.com/7.x/avataaars/svg?seed=Sonic')" }}></div>
        </div>
      </div>
    </header>
  );
};

export default Navbar;
