import React from 'react';
import { Link, useLocation } from 'react-router-dom';
import { motion } from 'framer-motion';
import { Terminal } from 'lucide-react';

export default function Navbar() {
  const location = useLocation();
  
  return (
    <nav className="bg-gray-800/50 backdrop-blur-sm sticky top-0 z-50">
      <div className="max-w-6xl mx-auto px-6 py-4">
        <div className="flex items-center justify-between">
          <Link to="/" className="flex items-center space-x-2">
            <Terminal className="w-6 h-6 text-cyan-400" />
            <span className="text-xl font-bold">Kaby_Kun</span>
          </Link>
          
          <div className="flex items-center space-x-8">
            <Link 
              to="/" 
              className={`hover:text-cyan-400 transition-colors ${location.pathname === '/' ? 'text-cyan-400' : 'text-gray-300'}`}
            >
              Home
            </Link>
            <Link 
              to="/projects" 
              className={`hover:text-cyan-400 transition-colors ${location.pathname === '/projects' ? 'text-cyan-400' : 'text-gray-300'}`}
            >
              Projects
            </Link>
          </div>
        </div>
      </div>
    </nav>
  );
}