const Navbar = () => {
    const [darkMode, setDarkMode] = React.useState(false);
    const [mobileMenuOpen, setMobileMenuOpen] = React.useState(false);

    React.useEffect(() => {
        if (darkMode) {
            document.documentElement.classList.add('dark');
        } else {
            document.documentElement.classList.remove('dark');
        }
    }, [darkMode]);

    const toggleDarkMode = () => {
        setDarkMode(!darkMode);
    };

    return (
        <nav className="bg-white dark:bg-gray-800 shadow-sm sticky top-0 z-50 transition-colors duration-300">
            <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                <div className="flex justify-between h-16">
                    <div className="flex items-center">
                        <a href="#" className="flex items-center">
                            <i data-feather="zap" className="text-indigo-500 dark:text-pink-500 w-6 h-6"></i>
                            <span className="ml-2 text-xl font-bold text-gray-900 dark:text-white">
                                PixelPulse
                            </span>
                        </a>
                    </div>

                    <div className="hidden md:flex items-center space-x-8">
                        <a href="#" className="text-gray-900 dark:text-white hover:text-indigo-500 dark:hover:text-pink-500 transition-colors">
                            Home
                        </a>
                        <a href="#" className="text-gray-900 dark:text-white hover:text-indigo-500 dark:hover:text-pink-500 transition-colors">
                            Features
                        </a>
                        <a href="#" className="text-gray-900 dark:text-white hover:text-indigo-500 dark:hover:text-pink-500 transition-colors">
                            Pricing
                        </a>
                        <a href="#" className="text-gray-900 dark:text-white hover:text-indigo-500 dark:hover:text-pink-500 transition-colors">
                            Contact
                        </a>
                        <button 
                            onClick={toggleDarkMode}
                            className="p-2 rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-pink-500"
                        >
                            <i data-feather={darkMode ? "sun" : "moon"} className="text-gray-900 dark:text-white w-5 h-5"></i>
                        </button>
                    </div>

                    <div className="md:hidden flex items-center">
                        <button 
                            onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
                            className="p-2 rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-pink-500"
                        >
                            <i data-feather={mobileMenuOpen ? "x" : "menu"} className="text-gray-900 dark:text-white w-5 h-5"></i>
                        </button>
                    </div>
                </div>
            </div>

            {mobileMenuOpen && (
                <div className="md:hidden bg-white dark:bg-gray-800 transition-colors duration-300">
                    <div className="pt-2 pb-3 space-y-1 px-4">
                        <a href="#" className="block px-3 py-2 rounded-md text-base font-medium text-gray-900 dark:text-white hover:text-indigo-500 dark:hover:text-pink-500">
                            Home
                        </a>
                        <a href="#" className="block px-3 py-2 rounded-md text-base font-medium text-gray-900 dark:text-white hover:text-indigo-500 dark:hover:text-pink-500">
                            Features
                        </a>
                        <a href="#" className="block px-3 py-2 rounded-md text-base font-medium text-gray-900 dark:text-white hover:text-indigo-500 dark:hover:text-pink-500">
                            Pricing
                        </a>
                        <a href="#" className="block px-3 py-2 rounded-md text-base font-medium text-gray-900 dark:text-white hover:text-indigo-500 dark:hover:text-pink-500">
                            Contact
                        </a>
                        <button 
                            onClick={toggleDarkMode}
                            className="block w-full text-left px-3 py-2 rounded-md text-base font-medium text-gray-900 dark:text-white hover:text-indigo-500 dark:hover:text-pink-500"
                        >
                            {darkMode ? 'Light Mode' : 'Dark Mode'}
                        </button>
                    </div>
                </div>
            )}
        </nav>
    );
}