"use client";
import React, { useState } from "react";
import Image from "next/image";
import Link from "next/link";
export default function Navbar() {
  const [isMenuOpen, setIsMenuOpen] = useState(false);

  return (
    <div className="bg-gray-800 text-white">
      <div className="flex justify-between items-center py-4 px-6 max-w-screen-xl mx-auto">
        <div className="flex items-center space-x-3">
          <Image
            src="/logo.png" // Replace with your logo path
            alt="Logo"
            className="h-8 w-8"
          />
          <Link href="/" className="text-2xl font-bold">
            Null Translation Group
          </Link>
        </div>

        {/* Navigation Links */}
        <nav className="hidden md:flex space-x-6">
          <Link href="/" className="hover:text-gray-400">
            Book List
          </Link>
          <Link href="https://patreon.com/NullTranslationGroup" className="hover:text-gray-400">
            Patreon
          </Link>
        </nav>

        {/* Mobile Menu Button */}
        <button
          className="md:hidden flex items-center text-gray-400 hover:text-white"
          onClick={() => setIsMenuOpen(!isMenuOpen)}
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            className="h-6 w-6"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
          >
            <path
              strokeLinecap="round"
              strokeLinejoin="round"
              strokeWidth={2}
              d="M4 6h16M4 12h16m-7 6h7"
            />
          </svg>
        </button>
      </div>

      {/* Mobile Menu */}
      {isMenuOpen && (
        <div className="md:hidden bg-gray-700 px-6 pb-4">
          <Link href="/" className="block py-2 hover:text-gray-400">
            Book List
          </Link>
          <Link href="https://patreon/NullTranslationGroup" className="block py-2 hover:text-gray-400">
            Patreon
          </Link>
        </div>
      )}
    </div>
  );
}