'use client';

import Link from 'next/link';
import { usePathname } from 'next/navigation';

const TABS = [
	{ href: '/paper', label: '홈' },
	{ href: '/paper/trade', label: '주문' },
	{ href: '/paper/portfolio', label: '포트폴리오' },
	{ href: '/paper/leaderboard', label: '리더보드' }
];

export default function PaperNav()
{
	const pathname = usePathname();

	return (
		<nav className='paper__nav' aria-label='모의투자 메뉴'>
			{TABS.map(tab => {
				const active = tab.href === '/paper' ? pathname === '/paper' : pathname.startsWith(tab.href);

				return (
					<Link
						key={tab.href}
						href={tab.href}
						className={`paper__nav-link${active ? ' paper__nav-link--active' : ''}`}
						aria-current={active ? 'page' : undefined}
					>
						{tab.label}
					</Link>
				);
			})}
		</nav>
	);
}