'use client';

import Link from 'next/link';
import Styles from '../styles/common.module.scss';
import useAuth from '@/hooks/useAuth';

export default function Layout({ children }: { children: React.ReactNode })
{
	const { isAuthenticated, isLoading, logout } = useAuth();

	if (isLoading) {
		return <></>;
	}

    return (
        <>
            <div id='container' className={Styles.container}>

                {/* 상단 내용 */}
                <header id='header' className={`${Styles.header} flex items-center justify-between w-full px-4`}>
                    <Link href='/' className='font-bold text-xl'>
                        <picture>
                            <source src="image.webp" type="image/webp" />
                            <img src="/resources/m-logo.webp" alt="bitforum logo" />
                        </picture>
                    </Link>
                    <nav className='flex grow items-center justify-between'>
                        <ul className='flex gap-4'>
                            <li>
                                <Link href='/'>
                                    코인
                                </Link>
                            </li>
                            <li>
                                <Link href='/latest'>
                                    토론
                                </Link>
                            </li>
                            <li>
                                <Link href='/news'>
                                    뉴스
                                </Link>
                            </li>
                            <li>
                                <Link href='/board/notice'>
                                    고객지원
                                </Link>
                            </li>
                        </ul>
						{!isAuthenticated ? (
							<ul className='flex gap-4'>
								<li>
									<a href='/login'>
										로그인
									</a>
								</li>
								<li>
									<a href='/register'>
										회원가입
									</a>
								</li>
							</ul>
						) : (
							<ul className='flex gap-4'>
								<li>
									<Link href='/profile'>
										내 정보
									</Link>
								</li>
								<li>
									<button type='button' onClick={logout}>
										로그아웃
									</button>
								</li>
							</ul>
						)}
                    </nav>
                </header>

                {/* 전광판 */}
                <p id='ticker' className={Styles.panel}></p>

                {/* 좌측 내용 */}
                <main id='main' className={`${Styles.main} relative`}>
                    {children}
                </main>

                {/* 우측 내용 */}
                <aside id='aside' className={Styles.aside}></aside>

                {/* 하단 내용 */}
                <footer id='footer' className={`${Styles.footer} px-4`}>
                    <ol>
                        {/* 최신글 표시 ▼ */}
                        <li>111111</li>

                        {/* 공지사항 표시 ▲ */}
                        <li>222222</li>

                        {/* 저작권 표시 */}
                        <li>© 2025 PLAYR. All rights reserved.</li>
                    </ol>
                </footer>
            </div>
        </>
    );
}