"use client"

import Link from 'next/link'

import React from 'react'
import Image from 'next/image'
import styles from './navbar.module.css'
import { useState } from 'react';

const links = [
{
id:1,
title: "Home",
url:"/",
},
{
id:2,
title: "Portfolio",
url:"/portfolio",
},
{
id:3,
title: "Blog",
url:"/blog",
},
{
id:4,
title: "About",
url:"/about",
},
{
id:5,
title: "Contact",
url:"/contact",
},
{
id:6,
title: "Dashboard",
url:"/dashboard",
},
]

const Navbar = () => {

const [burger_class, setBurgerClass]=useState("burger-bar unclicked")

const [menu_class, setMenuClass]=useState("menu hidden")
const [isMenuClicked, setisMenuClicked]=useState(false)

const updateMenu = () => {

if(!isMenuClicked) {
setBurgerClass("burger-bar clicked")
setMenuClass("menu visible")
console.log("No Clicked")
}
 else{
setBurgerClass("burger-bar unclicked")
setMenuClass("menu hidden")
console.log("Not Clicked")
}
setisMenuClicked(!isMenuClicked)
}

return (
<>
<div className={`flex ${styles.container}`}>
<Link className={styles.logo} href="/">
<Image className={styles.logo} src="/bos_logo.svg" width={110} height={50}/>
</Link>

<div className={`flex flex-col md:flex-row ${styles.navmenu}`}>

{links.map(link=>(
<Link className={styles.menuitem} key={link.id}
href={link.url}>{link.title}</Link>
))}
</div>
<Link href="/contact">
<h2 className={styles.tagline}><strong>grow with us</strong><span
className={styles.dots}>.</span></h2>
</Link>
<div className={`burgermenu ${burger_class}`} onClick={updateMenu}>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
strokeWidth={1.5} stroke="currentColor" className="w-6 h-6">
<path strokeLinecap="round" strokeLinejoin="round" d="M3.75 6.75h16.5M3.75
12h16.5m-16.5 5.25h16.5" />
</svg>

</div>

</div>

<div className={menu_class}>
Hardik
</div>

</>
)
}

export default Navbar