import { HedaerLinksArray } from '../../data/HeaderLinks'
import AnimationButton from '../../Components/Ui/AnimationButton';
import NavBarMenu from './NavBarMenu';
import ViewSearch from '../../Components/Utils/Search/Search';
import SearchButton from '../../Components/Utils/Search/SearchButton';

const NavBar = () => {
  const [noDataFound, setNoDataFound] = useState(false);
  const [open, setOpen] = useState(false);

  return (
    <div className='header_container'>

        <div className='image_container'>
        {/* { isLoading ? <Spinner/> : */}
          <img src={'/Logo/Logo.png'} alt='Logo'/>
        {/* } */}
        </div>
        <div className='Header_links'>
          {
            // isLoading ? <Spinner/> :
            HedaerLinksArray.map((link,index) => {
              const drawerLinkClass = link.isOnlyDrawer ? 'only_drawer' : '';
              return (
                <NavLink 
                  key={index} 
                  to={link.href} 
                  className={({ isActive }) => 
                    `${drawerLinkClass} Link ${isActive ? `active` : ''}`
                  }
                >
                  <h4>{link.name}</h4>
                </NavLink>
              );
            })}
        </div> 
        <div className="button_container">
          <SearchButton setOpen={setOpen} setNoDataFound={setNoDataFound} />
        </div>

          <NavBarMenu />
    </div>
  )
}

export default NavBar