import Link from "next/link";
import { cn } from "@/lib/utils"


const Break = ()=> <hr className={cn("w-100")}></hr>

// const Navbar = () => {
//     return (
//         <div className={cn("bg-666666 pt-1 pb-1")}>
//             <Break/>
//             <div className={cn("flex h-20 text-white justify-around items-center")}>
//                 <Link href="/">
//                     <div>Home</div>
//                 </Link>
//                 <Link href="/blog">
//                     <div>Blog</div>
//                 </Link>
//                 <Link href="/tools">
//                     <div>Tools</div>
//                 </Link>
//                 <Link href="/demos">
//                     <div>Demos</div>
//                 </Link>
//                 <Link href="/login">
//                     <div>Login</div>
//                 </Link>
//                 <br></br>
//             </div>
//             <Break/>
//         </div>
//     );
// }



const Navbar = ()=>{
    return(
        <div className={cn("bg-666666 pt-1 pb-1")}>
            <Break/>
            <nav className="flex items-center justify-between flex-wrap bg-666666 p-6">
                <div className="flex items-center flex-shrink-0 text-white mr-6">
                    <svg className="fill-current h-8 w-8 mr-2" width="54" height="54" viewBox="0 0 110 108" xmlns="http://www.w3.org/2000/svg"><path fill="#817e6f" stroke="#817e6f" d="M44.041 3.733C19.347 8.36 1.002 35.479 4.889 61.612c6.132 41.231 55.737 58.121 86.414 29.423 28.694-26.841 16.128-76.613-21.838-86.502-5.508-1.435-19.66-1.88-25.424-.8" fillRule="evenodd"/><path fill="#4f4b42" stroke="#4f4b42" d="M29.315 46.985C22.272 49.893 24.796 61 32.5 61c3.81 0 7.5-3.702 7.5-7.524 0-4.839-5.941-8.448-10.685-6.491M77 46.709C69.367 49.516 70.885 61 78.889 61c7.002 0 10.016-8.104 4.712-12.667-2.736-2.354-3.862-2.631-6.601-1.624m-57.403 6.135c-.346.56-.142 1.319.453 1.687 1.538.95 2.53-.351 1.246-1.635-.718-.718-1.277-.735-1.699-.052m23.986.022c-.431.697-.513 1.537-.183 1.867.895.895 1.871-.421 1.387-1.871-.338-1.016-.574-1.016-1.204.004M66 54c0 .55.675 1 1.5 1s1.5-.45 1.5-1-.675-1-1.5-1-1.5.45-1.5 1m23.5 0c.34.55 1.041 1 1.559 1s.941-.45.941-1-.702-1-1.559-1-1.281.45-.941 1" fillRule="evenodd"/></svg>
                    <span className="font-semibold text-xl tracking-tight">Wretched Machines</span>
                </div>
                <div className="block lg:hidden">
                    <button className="flex items-center px-3 py-2 border rounded text-gray-200 border-gray-400 hover:text-white hover:border-white">
                    <svg className="fill-current h-3 w-3" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><title>Menu</title><path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"/></svg>
                    </button>
                </div>
                <div className="w-full block flex-grow lg:flex lg:items-center lg:w-auto">
                    <div className="text-md lg:flex-grow">
                        <Link href="/" className="block mt-4 lg:inline-block lg:mt-0 text-gray-200 hover:text-white mr-4">
                            Home
                        </Link>
                        <Link href="/blog" className="block mt-4 lg:inline-block lg:mt-0 text-gray-200 hover:text-white mr-4">
                            Blog
                        </Link>
                        <Link href="/tools" className="block mt-4 lg:inline-block lg:mt-0 text-gray-200 hover:text-white mr-4">
                            Tools
                        </Link>
                        <Link href="/demos" className="block mt-4 lg:inline-block lg:mt-0 text-gray-200 hover:text-white mr-4">
                            Demos
                        </Link>
                    </div>
                    <div>
                        <Link href="/login" className="inline-block text-sm px-4 py-2 leading-none border rounded text-white border-white hover:border-transparent hover:text-teal-500 hover:bg-white mt-4 lg:mt-0">Login</Link>
                        <Link href="/register" className="inline-block text-sm px-4 py-2 leading-none border rounded text-white border-white hover:border-transparent hover:text-teal-500 hover:bg-white mt-4 lg:mt-0">Register</Link>
                    </div>
                </div>
            </nav>
            <Break/>
        </div>
    );
}

export default Navbar;