text: import {useState} from "react";
  import Link from "next/link";
  import { menuData } from "./data";
  import ButtonSearch from "../ButtonSearch";
  
  import {
    AiOutlineMenu, 
    AiOutlineClose,
    AiFillLinkedin, 
    AiFillGithub, 
    AiFillYoutube, 
  } from "react-icons/ai";
  
  import { 
    NavComponent, 
    NavMenu, 
    NavList,
    DropIcon, 
    DropMenu,
    CloseDropMenu,
    SocialMedias,
    LogoIcon 
  } from "./styles";
  
  const Navbar = () => {
    const [dropmenu, setDropBar] = useState(false);
    const showDropBar = () => setDropBar(!dropmenu);
  
    return(
      <NavComponent>
        <Link href="/">
          <LogoIcon>
            <img src="./logo.svg" alt="Logo"/>
          </LogoIcon>
        </Link>
        <NavMenu>
          <NavList>
            {menuData.map((item, index) => {
              return(
                <li key={index}>
                  <Link href={item.path}>
                    {item.title}
                  </Link>
                </li>
              );
            })}
          </NavList>
        </NavMenu>
        <ButtonSearch />
        <DropIcon onClick={showDropBar}>
          <AiOutlineMenu/>
        </DropIcon>  
        <DropMenu   
          className= {
            dropmenu 
            ? "drop-menu active" 
            : "drop-menu"
          }
        >
          <CloseDropMenu onClick={showDropBar}>
            <AiOutlineClose/>
          </CloseDropMenu>
          <ul>
            {menuData.map((item, index) => {
              return(
                <li key={index}>
                  <Link href={item.path}>
                    {item.title}
                  </Link>
                </li>
              );
            })}
          </ul>
          <SocialMedias className="social-medias">
            <Link href="/">
              <a className="linkedin"><AiFillLinkedin/></a>
            </Link>
            <Link href="/">
              <a className="github"><AiFillGithub /></a>
            </Link>
            <Link href="/">
              <a className="youtube"><AiFillYoutube /></a>
            </Link>
          </SocialMedias>
        </DropMenu>
      </NavComponent>
    );
  }
  
  export default Navbar;
  