'use client';

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

const TABS = [
	{ href: '/market', label: '개요' },
	{ href: '/market/etp', label: 'ETP' },
	{ href: '/market/bonds', label: '채권' },
	{ href: '/market/derivatives', label: '파생' },
	{ href: '/market/commodities', label: '상품' },
	{ href: '/market/esg', label: 'ESG' },
	{ href: '/disclosure', label: '공시' }
];

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

	return (
		<nav className='market__nav' aria-label='시장 데이터 메뉴'>
			{TABS.map(tab => {
				const active = tab.href === '/market' ? pathname === '/market' : pathname.startsWith(tab.href);

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