import React, { useState } from 'react';
import Link from 'next/link';
import { motion } from 'framer-motion';
import ThemeToggler from '../ThemeToggler';

const Navbar = () => {
  const [isMenuOpen, setIsMenuOpen] = useState(false);

  const toggleMenu = () => setIsMenuOpen(!isMenuOpen);

  return (
    <nav className="bg-secondary-bg sticky top-0 z-50 shadow-lg">
      <div className="container-custom py-4">
        <div className="flex justify-between items-center">
          {/* Logo */}
          <Link href="/" className="flex items-center space-x-2">
            <span className="text-2xl font-bold text-text-primary">Nomi<span className="text-accent">Bot</span></span>
          </Link>

          {/* Desktop Navigation */}
          <div className="hidden md:flex space-x-8">
            <NavLink href="/" text="Ana Sayfa" />
            <NavLink href="/commands" text="Komutlar" />
            <NavLink href="/about" text="Hakkında" />
            <NavLink href="/support" text="Destek" />
          </div>

          {/* Mobile menu button */}
          <div className="flex items-center space-x-4 md:space-x-6">
            <ThemeToggler />
            
            <button
              onClick={toggleMenu}
              className="md:hidden text-text-primary focus:outline-none"
              aria-label="Toggle menu"
            >
              <svg
                className="w-6 h-6"
                fill="none"
                stroke="currentColor"
                viewBox="0 0 24 24"
                xmlns="http://www.w3.org/2000/svg"
              >
                {isMenuOpen ? (
                  <path
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    strokeWidth={2}
                    d="M6 18L18 6M6 6l12 12"
                  />
                ) : (
                  <path
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    strokeWidth={2}
                    d="M4 6h16M4 12h16M4 18h16"
                  />
                )}
              </svg>
            </button>
          </div>

          {/* Add Bot Button */}
          <div className="hidden md:block">
            <Link href="https://discord.com/api/oauth2/authorize?client_id=YOUR_CLIENT_ID&permissions=8&scope=bot%20applications.commands" className="btn btn-primary">
              Botu Davet Et
            </Link>
          </div>
        </div>

        {/* Mobile Navigation */}
        {isMenuOpen && (
          <motion.div
            initial={{ opacity: 0, y: -10 }}
            animate={{ opacity: 1, y: 0 }}
            exit={{ opacity: 0, y: -10 }}
            className="md:hidden pt-4 pb-3 space-y-3"
          >
            <MobileNavLink href="/" text="Ana Sayfa" onClick={toggleMenu} />
            <MobileNavLink href="/commands" text="Komutlar" onClick={toggleMenu} />
            <MobileNavLink href="/about" text="Hakkında" onClick={toggleMenu} />
            <MobileNavLink href="/support" text="Destek" onClick={toggleMenu} />
            <div className="pt-2">
              <Link href="https://discord.com/api/oauth2/authorize?client_id=YOUR_CLIENT_ID&permissions=8&scope=bot%20applications.commands" className="btn btn-primary block text-center">
                Botu Davet Et
              </Link>
            </div>
          </motion.div>
        )}
      </div>
    </nav>
  );
};

interface NavLinkProps {
  href: string;
  text: string;
}

interface MobileNavLinkProps extends NavLinkProps {
  onClick: () => void;
}

const NavLink = ({ href, text }: NavLinkProps) => {
  return (
    <Link href={href} className="text-text-primary hover:text-accent transition-colors duration-300">
      {text}
    </Link>
  );
};

const MobileNavLink = ({ href, text, onClick }: MobileNavLinkProps) => {
  return (
    <Link href={href} className="block py-2 px-4 text-text-primary hover:bg-background rounded-md transition-colors duration-300" onClick={onClick}>
      {text}
    </Link>
  );
};

export default Navbar;