'use client';

import { cn } from '@/lib/utils';
import { usePathname } from 'next/navigation';

let links = [
	{ href: '', label: 'Applications' },
	{ href: 'databases', label: 'Databases' },
	{ href: 'registry', label: 'Registry' },
	{ href: 'settings', label: 'Settings' },
];

export default function Navigation() {
	let pathname = usePathname();

	return (
		<nav>
			<ul className="flex flex-row justify-start mt-4 mb-2 gap-8">
				{links.map(({ href, label }) => (
					<li key={label}>
						<a className={cn('px-3 py-2 rounded-md text-black font-medium text-sm', checkPathname(pathname, href) && 'bg-[#3A7BFE] text-white')} href={setHref(pathname, href)}>
							{label}
						</a>
					</li>
				))}
			</ul>
		</nav>
	);
}

function checkPathname(pathname: string, href: string): boolean {
	const route = pathname.split('/')[2] || '';
	if (route === href) return true;
	return false;
}

function setHref(pathname: string, href: string): string {
	const route = pathname.split('/')[1];
	if (!route) return '';
	return `/${route}/${href}`;
}
