/**
 * 사이드 네비게이션 메뉴
 * - 퍼블리시 NavComponent 구조와 동일하게 맞춤
 */

const gnbList = [
  { key: 'gnb1', className: 'gnb1', label: '선박', path: 'ship' },
  { key: 'gnb2', className: 'gnb2', label: '위성', path: 'satellite' },
  { key: 'gnb3', className: 'gnb3', label: '기상', path: 'weather' },
  { key: 'gnb4', className: 'gnb4', label: '분석', path: 'analysis' },
  { key: 'gnb5', className: 'gnb5', label: '타임라인', path: 'timeline' },
  // { key: 'gnb6', className: 'gnb6', label: 'AI모드', path: 'ai' },
  { key: 'gnb7', className: 'gnb7', label: '리플레이', path: 'replay' },
  // { key: 'gnb8', className: 'gnb8', label: '항적조회', path: 'tracking' },
];

// 필터/레이어 버튼 비활성화 — 선박(gnb1) 버튼에서 DisplayComponent로 통합
const sideList = [
  // { key: 'filter', className: 'filter', label: '필터', path: 'filter' },
  // { key: 'layer', className: 'layer', label: '레이어', path: 'layer' },
];

export default function SideNav({ activeKey, onChange }) {
  return (
    <nav id="nav">
      <ul className="gnb">
        {gnbList.map((item) => (
          <li key={item.key}>
            <button
              type="button"
              className={`${item.className} ${activeKey === item.key ? 'active' : ''}`}
              onClick={() => onChange(item.key)}
              aria-label={item.label}
              title={item.label}
            >
              <span className="blind">{item.label}</span>
            </button>
          </li>
        ))}
      </ul>

      <ul className="side">
        {sideList.map((item) => (
          <li key={item.key}>
            <button
              type="button"
              className={`${item.className} ${activeKey === item.key ? 'active' : ''}`}
              onClick={() => onChange(item.key)}
              aria-label={item.label}
              title={item.label}
            >
              <span className="blind">{item.label}</span>
            </button>
          </li>
        ))}
      </ul>
    </nav>
  );
}

// 키-경로 매핑 export (Sidebar에서 사용)
export const keyToPath = {
  gnb1: 'ship',
  gnb2: 'satellite',
  gnb3: 'weather',
  gnb4: 'analysis',
  gnb5: 'timeline',
  gnb6: 'ai',
  gnb7: 'replay',
  gnb8: 'tracking',
  filter: 'filter',
  layer: 'layer',
};

export const pathToKey = Object.fromEntries(
  Object.entries(keyToPath).map(([k, v]) => [v, k])
);