'use client';

import './style.scss';
import React from 'react';
import Link from 'next/link';
import { usePathname } from 'next/navigation';

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

    return (
		<div id="tabs">
			{[
				{ href: "/profile", label: "내 정보" },
				{ href: "/change-password", label: "비밀번호 변경" },
				{ href: "/my-posts", label: "작성 게시글" },
				{ href: "/my-comments", label: "작성 댓글" },
				{ href: "/exp-logs", label: "경험치 내역" },
				{ href: "/login-log", label: "로그인 기록" },
				{ href: "/withdraw", label: "회원탈퇴" },
				{ href: "/cash", label:"캐시 충전"}
			].map(({ href, label }, index, array) => (
				<React.Fragment key={href}>
					<Link href={href} className={pathname === href ? 'active' : ''}>{label}</Link>
					{index !== array.length - 1 && <span>&nbsp;</span>}
				</React.Fragment>
			))}
		</div>
	);
}