import React from 'react';
import { FiActivity, FiUser, FiBell } from 'react-icons/fi';

const Navbar = ({ darkMode, setDarkMode }) => {
  return (
    <nav className="border-b border-gray-800 py-4 px-6 sticky top-0 z-50 bg-gradient-to-r from-emerald-500/10 to-blue-500/10 backdrop-blur">
      <div className="container mx-auto flex justify-between items-center">
        <div className="flex items-center space-x-2">
          <FiActivity className="text-blue-500" />
          <h1 className="text-xl font-bold bg-gradient-to-r from-blue-500 to-emerald-500 bg-clip-text text-transparent">
            SolBot Sentinel
          </h1>
        </div>
        
        <div className="hidden md:flex items-center space-x-8">
          <a href="#" className="text-blue-500 border-b-2 border-blue-500 pb-1">Dashboard</a>
          <a href="#" className="text-gray-400 hover:text-blue-500 transition">Analytics</a>
          <a href="#" className="text-gray-400 hover:text-blue-500 transition">History</a>
          <a href="#" className="text-gray-400 hover:text-blue-500 transition">Settings</a>
        </div>
        
        <div className="flex items-center space-x-4">
          <button 
            className="p-2 rounded-full hover:bg-gray-800 transition"
            onClick={() => setDarkMode(!darkMode)}
          >
            {darkMode ? '☀️' : '🌙'}
          </button>
          <button className="p-2 rounded-full hover:bg-gray-800 transition">
            <FiBell />
          </button>
          <div className="w-8 h-8 rounded-full bg-blue-500 flex items-center justify-center">
            <FiUser className="w-4 h-4" />
          </div>
        </div>
      </div>
    </nav>
  );
};

export default Navbar;