"use client"

import cn from "@/utils/cn";
import Link from "next/link";
import { FaDollarSign } from "react-icons/fa";
import { IoIosArrowUp } from "react-icons/io";
import { BsDiscord } from "react-icons/bs";

const Navbar = () => {
    console.log("A")
    return (
        <>
            <nav className={`p-4 items-center justify-between gap-2 text-base font-medium text-neutral-300 select-none h-20 hidden lg:flex`}>
                <div className="flex items-center gap-2">
                    <Link
                        aria-label="Go to RoClothes's homepage"
                        className={cn("font-semibold flex items-center mr-2")}
                        href="/?utm_source=pulsey.xyz&utm_medium=header"
                    >
                        <span className="text-xl text-neutral-100 hidden sm:block">RoClothes</span>
                    </Link>

                    <div className="h-10 w-[2px] bg-neutral-500/50 mx-1 rotate-6"></div>

                    <div className="flex gap-1">
                        <Link href="/vote" className="hover:bg-[#ffffff0f] py-1 px-3 rounded-md duration-200 flex items-center gap-2 group">
                            <IoIosArrowUp />
                            Features
                        </Link>
                        <Link href="/pricing" className="hover:bg-[#ffffff0f] py-1 px-3 rounded-md duration-200 flex items-center gap-2 group">
                            <FaDollarSign />
                            Pricing
                        </Link>
                    </div>
                </div>
                <div className="ml-auto">
                    <button className="hover:bg-[#ffffff0f] bg-pulsey p-2 text-lg rounded-lg focus:ring-0 hover:text-white transition-all duration-200 ease-in-out">
                        <span className="font-semibold">Login</span>
                    </button>
                </div>
            </nav>
            
            <nav className="fixed bg-neutral-900 bottom-4 left-1/2 transform -translate-x-1/2 rounded-lg w-[90%] p-4 flex justify-around text-2xl font-medium text-neutral-300 select-none h-20 z-[999] lg:hidden">
                <Link href="/vote" className="hover:bg-[#ffffff0f] py-1 px-3 rounded-md duration-200 flex flex-col items-center gap-1 group">
                    <IoIosArrowUp/>
                    <span className="text-xs">Features</span>
                </Link>
                <Link href="/pricing" className="hover:bg-[#ffffff0f] py-1 px-3 rounded-md duration-200 flex flex-col items-center gap-1 group">
                    <FaDollarSign />
                    <span className="text-xs">Pricing</span>
                </Link>
                <Link href="/login" className="hover:bg-[#ffffff0f] py-1 px-3 rounded-md duration-200 flex flex-col items-center gap-1 group">
                    <BsDiscord />
                    <span className="text-xs">Login</span>
                </Link>
            </nav>
        </>
    );
};

export default Navbar;