"use client";

import Link from "next/link";
import {cn} from "@/lib/utils";
import {usePathname} from "next/navigation";
import {ADVANCED_URL, FAQ_URL, NOTIFICATIONS_URL, PROFILE_URL, SECURITY_URL, SUPPORT_URL} from "@/lib/constants";

export default function ProfileNavBarContainer() {
    const path = usePathname()

    return (
        <nav className="grid gap-4 text-sm text-muted-foreground">
            <ProfileNavLink link={PROFILE_URL} name={"Profile"} currentSelectedLink={path}/>
            <ProfileNavLink link={NOTIFICATIONS_URL} name={"Notifications"} currentSelectedLink={path}/>
            <ProfileNavLink link={FAQ_URL} name={"Frequently Asked Questions"} currentSelectedLink={path}/>
            <ProfileNavLink link={SUPPORT_URL} name={"Support"} currentSelectedLink={path}/>
            <ProfileNavLink link={ADVANCED_URL} name={"Advanced"} currentSelectedLink={path}/>
            <ProfileNavLink link={SECURITY_URL} name={"Security"} currentSelectedLink={path}/>
        </nav>
    )
}


type ProfileNavLinkProps = {
    link: string;
    name: string;
    currentSelectedLink: string;
}

function ProfileNavLink({link, name, currentSelectedLink}: ProfileNavLinkProps) {
    return (
        <Link
            href={link}
            className={cn({
                "font-semibold text-primary": currentSelectedLink === link
            })}
        >{name}</Link>
    )
}