"use client";
import { Clock } from "lucide-react";
import Link from "next/link";
import { QueryClient , QueryClientProvider } from "@tanstack/react-query";
import { WagmiProvider,useAccount } from "wagmi";
import {config} from "../config"
import { WalletLogic } from "./Wallets";
import { Account } from "./AccountData";



export default function Navbar({Works,Rules,Contact}:any) {

  

  const worksRef = ()=>{

    if(!Works.current){
      return
    }

    Works.current.scrollIntoView({
      behavior:"smooth",
      block:"start"
    })

  }


  const rulesRef = ()=>{

    if(!Rules.current){
      return
    }

    Rules.current.scrollIntoView({
      behavior:"smooth",
      block:"start"
    })

  }

  const contactsRef = ()=>{

    if(!Contact.current){
      return
    }

    Contact.current.scrollIntoView({
      behavior:"smooth",
      block:"start"
    })

  }

  const allContentArray = [
  {
    name:"How it Works",
    link:worksRef
  },
  {
    name:"Rules",
    link:rulesRef
  },
  {
    name:"Contact",
    link:contactsRef
  }
]

const otherPages = [
  {
    name:"Start Challenge",
    link:"startChallenge"
  },
  {
    name:"Check Challenge",
    link:"yourCommits"
  },
  
]


  const myQClient = new QueryClient()

  const ConnectWallet = ()=>{
    let {isConnected} = useAccount()
    if(isConnected) return <Account></Account>
    return <WalletLogic></WalletLogic>
  }

  return (
    <nav className="fixed top-0 left-0 right-0 z-50 flex items-center justify-between px-10 py-4 border-b border-[#1c2128] bg-[rgba(8,10,13,0.85)] backdrop-blur-xl">
      
      <Link href="/" className="flex items-center gap-2.5 no-underline">
        
        <span className="font-mono text-[40px] font-semibold text-[#e6edf3] tracking-tight">
          GhLockedIn
        </span>
      </Link>

      
      <ul className="hidden md:flex items-center gap-8 list-none">

        <WagmiProvider config={config}>

          <QueryClientProvider client={myQClient}>
             <ConnectWallet></ConnectWallet>
          </QueryClientProvider>

        </WagmiProvider>

        {allContentArray.map((item,index) => (
          <li key={index}>
            <div
              onClick={item.link}
              className="text-white hover:cursor-pointer text-sm text-[18px] font-normal hover:text-[#e6edf3] transition-colors no-underline"
            >
              {item.name}
            </div>
          </li>
        ))}

        {otherPages.map((item,index) => (
          <li key={index}>
            <Link
              href={item.link}
              className="text-white hover:cursor-pointer text-sm text-[18px] font-normal hover:text-[#e6edf3] transition-colors no-underline"
            >
              {item.name}
            </Link>
          </li>
        ))}
        
      </ul>
    </nav>
  );
}
