import { IProps } from "@/common/Iprops.interface";
import * as React from 'react';
import { useState } from 'react';
import Logo from '@/assets/img/33logo.png';
import { Link, useLocation } from 'react-router-dom';
export interface IAppProps extends IProps {
}

const HoverLink = () =>{
  const [onHover,setOnHover] =useState(false);
  return (
    <div
     className='relative'
    onPointerEnter={()=>setOnHover(true)}
    onPointerLeave={()=>setOnHover(false)}
    >
     <div className='cursor-pointer'

     >合作生态</div>
     {
       onHover?
          <div className='py-3'>
              <div className='hover-toggle-box w-[180%]
              absolute
              animate-fadeIn
              animate-alternate
              animate-fill-both
               bg-opacity-75
              -translate-x-[18%] text-black rounded-lg flex-col
                items-center justify-center text-center py-3 px-2 bg-[#EAF0F4]'>
              <div className='my-[8px] cursor-pointer'>上链查</div>
              <div className='my-[8px] cursor-pointer'>上链购</div>
              <div className='my-[8px] cursor-pointer'>链证宝</div>
              </div>
            </div>
         :''
     }
    </div>
  )
}


export default function Navbar (props: IAppProps) {
  const {pathname} = useLocation()

  return (
      <nav className='flex min-w-[1200px]  justify-between absolute px-28 w-full top-0 z-[99999] py-6 text-sm text-slate-400 '>
        <div className='left '>
           <img src={Logo} alt="" />
        </div>
        <div className='right flex gap-x-12'>
        <Link to='/' className={`hover:text-black ${pathname ==='/'?'text-black':'text-slate-400'}`}>Baas33</Link>
        <Link to='chain33' className={`hover:text-black ${pathname ==='/chain33'?'text-black':'text-slate-400'}`}>Chain33</Link>
        <HoverLink />
       <Link to='news' className={`hover:text-black ${pathname ==='/news'?'text-black':'text-slate-400'}`}>新闻动态</Link>
        {/* <Link to='classes' className={`hover:text-black ${pathname ==='/classes'?'text-black':'text-slate-400'}`}>公开课</Link> */}
        <Link to='about' className={`hover:text-black ${pathname ==='/about'?'text-black':'text-slate-400'}`}>关于我们</Link>

        </div>
        {/* <div className='right flex-grow-0'>
            toolbar
        </div> */}
      </nav>
   
  );
}
