import React from 'react';
import { Star, Info, Settings } from 'lucide-react';

const Navbar = ({ setView, setSpeed, speed }) => {
  return (
    <nav className="fixed top-0 left-0 right-0 z-50 bg-black/30 backdrop-blur-md border-b border-white/10">
      <div className="container mx-auto px-4 py-3">
        <div className="flex items-center justify-between">
          <div className="flex items-center gap-2">
            <Star className="text-cyan-400 h-6 w-6" />
            <h1 className="text-xl font-bold bg-gradient-to-r from-cyan-400 to-purple-500 bg-clip-text text-transparent">
              Solar System 3D
            </h1>
          </div>
          
          <div className="flex items-center gap-4">
            <button 
              onClick={() => setView('solar-system')}
              className={`px-3 py-1.5 rounded-lg text-sm font-medium transition-colors ${
                view === 'solar-system' 
                  ? 'bg-cyan-500/20 text-cyan-400' 
                  : 'text-gray-300 hover:bg-white/5'
              }`}
            >
              Solar System
            </button>
            <button 
              onClick={() => setView('planet-details')}
              className={`px-3 py-1.5 rounded-lg text-sm font-medium transition-colors ${
                view === 'planet-details' 
                  ? 'bg-cyan-500/20 text-cyan-400' 
                  : 'text-gray-300 hover:bg-white/5'
              }`}
            >
              Planet Details
            </button>
            
            <div className="flex items-center gap-2 ml-4">
              <Settings className="h-4 w-4 text-gray-400" />
              <span className="text-xs text-gray-400">Speed:</span>
              <input 
                type="range" 
                min="0.1" 
                max="2" 
                step="0.1" 
                value={speed} 
                onChange={(e) => setSpeed(parseFloat(e.target.value))}
                className="w-24 h-1 bg-gray-700 rounded-lg appearance-none cursor-pointer accent-cyan-500"
              />
            </div>
          </div>
        </div>
      </div>
    </nav>
  );
};

// Fix: Define view outside the component
const view = 'solar-system';

export default Navbar;