import type { ReactNode } from 'react';

const navItems = ['소개', '게시판', '자료실', '마이페이지'];

function UserHeader() {
  return (
    <header className="header">
      <div className="header_top">
        <div className="inner">
          <div className="area_left" />
          <ul className="user_menu">
            <li>
              <a href="#">본인인증</a>
            </li>
            <li>
              <a href="#">마이페이지</a>
            </li>
          </ul>
        </div>
      </div>
      <div className="header_container">
        <div className="inner">
          <h1 className="logo">
            <a href="#">
              <span>BASE USER</span>
            </a>
          </h1>
          <nav>
            <ul className="gnb">
              {navItems.map((item) => (
                <li key={item}>
                  <a href="#" className="depth01">
                    {item}
                  </a>
                  <div className="depth02_container">
                    <ul className="depth02_ul">
                      <li>
                        <a href="#" className="depth02">
                          {item} 하위메뉴
                        </a>
                      </li>
                      <li>
                        <a href="#" className="depth02">
                          안내
                        </a>
                      </li>
                    </ul>
                  </div>
                </li>
              ))}
            </ul>
          </nav>
          <ul className="header_util">
            <li>
              <button type="button" className="btn_search" title="검색">
                <i />
              </button>
            </li>
            <li>
              <button type="button" className="btn_sitemap" title="전체메뉴 보기">
                <i />
              </button>
            </li>
          </ul>
        </div>
      </div>
    </header>
  );
}

function UserSideMenu() {
  return (
    <aside className="sidemenu">
      <div className="sidemenu_tit">
        <h2>마이페이지</h2>
      </div>
      <nav className="sidemenu_nav">
        <ul className="depth01_list">
          <li>
            <a href="#" className="depth01" rel="noopener noreferrer">
              게시판 <i />
            </a>
            <ul className="depth02_list">
              <li>
                <a href="#" className="depth02">
                  공지사항
                </a>
              </li>
              <li>
                <a href="#" className="depth02">
                  자료실
                </a>
              </li>
            </ul>
          </li>
          <li>
            <a href="#" className="depth01">
              내 신청 내역
            </a>
          </li>
          <li>
            <a href="#" className="depth01">
              회원정보
            </a>
          </li>
        </ul>
      </nav>
    </aside>
  );
}

type UserLayoutProps = {
  children: ReactNode;
  title?: string;
};

export function UserLayout({ children, title = '공지사항' }: UserLayoutProps) {
  return (
    <div className="wrap">
      <UserHeader />
      <div id="container" className="container sub">
        <div className="inner">
          <UserSideMenu />
          <div className="content_wrap">
            <div className="content_title">
              <h2>{title}</h2>
            </div>
            <div className="contents">{children}</div>
          </div>
        </div>
      </div>
      <footer className="footer">
        <div className="inner">Copyright BASE USER.</div>
      </footer>
    </div>
  );
}