import React, { useState, useEffect } from 'react';
import { Link } from 'react-router-dom';
import feather from 'feather-icons';

const Navbar = () => {
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);

  useEffect(() => {
    feather.replace();
  }, [mobileMenuOpen]);

  return (
    <nav className="bg-white shadow-sm">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="flex justify-between h-16 items-center">
          <div className="flex items-center">
            <Link to="/" className="flex items-center text-blue-800 font-bold text-xl">
              <i data-feather="activity" className="mr-2"></i>
              CureLens AI
            </Link>
          </div>

          <div className="hidden md:flex items-center space-x-8">
            <Link to="/features" className="text-gray-600 hover:text-blue-600">
              Features
            </Link>
            <Link to="/pricing" className="text-gray-600 hover:text-blue-600">
              Pricing
            </Link>
            <Link to="/about" className="text-gray-600 hover:text-blue-600">
              About
            </Link>
          </div>

          <div className="hidden md:flex items-center space-x-4">
            <Link to="/login" className="text-gray-600 hover:text-blue-600">
              Log in
            </Link>
            <Link to="/register" className="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md">
              Sign up
            </Link>
          </div>

          <div className="md:hidden">
            <button
              onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
              className="text-gray-600 hover:text-gray-900 focus:outline-none"
            >
              <i data-feather={mobileMenuOpen ? "x" : "menu"}></i>
            </button>
          </div>
        </div>
      </div>

      {mobileMenuOpen && (
        <div className="md:hidden bg-white shadow-lg">
          <div className="px-2 pt-2 pb-3 space-y-1 sm:px-3">
            <Link to="/features" className="block px-3 py-2 text-gray-600 hover:bg-gray-50">
              Features
            </Link>
            <Link to="/pricing" className="block px-3 py-2 text-gray-600 hover:bg-gray-50">
              Pricing
            </Link>
            <Link to="/about" className="block px-3 py-2 text-gray-600 hover:bg-gray-50">
              About
            </Link>
            <div className="border-t border-gray-200 mt-2 pt-2">
              <Link to="/login" className="block px-3 py-2 text-gray-600 hover:bg-gray-50">
                Log in
              </Link>
              <Link to="/register" className="block px-3 py-2 text-blue-600 hover:bg-gray-50">
                Sign up
              </Link>
            </div>
          </div>
        </div>
      )}
    </nav>
  );
};

export default Navbar;