'use client';

import '@/app/styles/note.scss';
import Link from 'next/link';
import { usePathname } from 'next/navigation';

export default function NoteLayout({ children }: { children: React.ReactNode })
{
	const pathname = usePathname();
	const isInbox = pathname?.startsWith('/note/inbox');
	const isOutbox = pathname?.startsWith('/note/outbox');

	return (
		<div className="note-page">
			<nav className="note-page__tabs" role="tablist" aria-label="쪽지함">
				<Link
					href="/note/inbox"
					role="tab"
					aria-selected={isInbox}
					className={`note-page__tab${isInbox ? ' note-page__tab--active' : ''}`}
				>
					받은 쪽지함
				</Link>
				<Link
					href="/note/outbox"
					role="tab"
					aria-selected={isOutbox}
					className={`note-page__tab${isOutbox ? ' note-page__tab--active' : ''}`}
				>
					보낸 쪽지함
				</Link>
			</nav>
			{children}
		</div>
	);
}