import { Outlet, Link, useLocation } from 'react-router-dom';

/**
 * 퍼블리시 레이아웃
 * - 퍼블리시 파일들을 미리보기 위한 레이아웃
 * - 상단에 네비게이션 제공
 */
export default function PublishLayout() {
  const location = useLocation();
  const currentPath = location.pathname;

  const menuItems = [
    { path: '/publish', label: '메인', exact: true },
    { path: '/publish/panel1', label: 'Panel1 (선박)' },
    { path: '/publish/panel2', label: 'Panel2 (위성)' },
    { path: '/publish/panel3', label: 'Panel3 (기상)' },
    { path: '/publish/panel4', label: 'Panel4 (분석)' },
    { path: '/publish/panel5', label: 'Panel5 (타임라인)' },
    { path: '/publish/panel6', label: 'Panel6 (AI모드)' },
    { path: '/publish/panel7', label: 'Panel7 (리플레이)' },
    { path: '/publish/panel8', label: 'Panel8 (항적조회)' },
  ];

  const isActive = (path, exact) => {
    if (exact) return currentPath === path;
    return currentPath.startsWith(path);
  };

  return (
    <div className="publish-wrapper">
      {/* 퍼블리시 네비게이션 */}
      <nav className="publish-nav">
        <div className="publish-nav-header">
          <Link to="/">← 메인으로</Link>
          <span className="publish-title">퍼블리시 미리보기</span>
        </div>
        <ul className="publish-menu">
          {menuItems.map((item) => (
            <li key={item.path}>
              <Link
                to={item.path}
                className={isActive(item.path, item.exact) ? 'active' : ''}
              >
                {item.label}
              </Link>
            </li>
          ))}
        </ul>
      </nav>

      {/* 퍼블리시 콘텐츠 */}
      <div className="publish-content">
        <Outlet />
      </div>
    </div>
  );
}
