'use client'

import Link from 'next/link';
import { SignedIn } from '@clerk/nextjs';
import { usePathname } from 'next/navigation';
//import { Client } from '@clerk/nextjs/server';

export default function Menu() {
    const is_active = (path: string) => path === usePathname();
    
    return <>
        <nav>
            <Link href="/" className={is_active("/") ? 'active-nav-element' : 'nav-element'}>Home</Link>
            <SignedIn>
                <Link href="/settings" className={is_active("/settings") ? 'active-nav-element' : 'nav-element'}>Settings</Link>
                <Link href="/create_post" className={is_active("/create_post") ? 'active-nav-element' : 'nav-element'}>Create A Post</Link>
                <Link href="/manage_pet_account" className={is_active("/manage_pet_account") ? 'active-nav-element' : 'nav-element'}>Manage Pet Accounts</Link>
            </SignedIn>
        </nav>
    </>
}