/**
 * 사이드 네비게이션 메뉴
 */

const gnbList = [
  { key: 'gnb1', className: 'gnb1', label: '선박', path: 'ship' },
  { key: 'gnb4', className: 'gnb4', label: '분석', path: 'analysis' },
  { key: 'gnb5', className: 'gnb5', label: '타임라인', path: 'timeline' },
  { key: 'gnb7', className: 'gnb7', label: '리플레이', path: 'replay' },
  { key: 'gnb8', className: 'gnb8', label: '항적분석', path: 'area-search' },
];

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>
    </nav>
  );
}

// 키-경로 매핑 export (Sidebar에서 사용)
export const keyToPath = {
  gnb1: 'ship',
  gnb4: 'analysis',
  gnb5: 'timeline',
  gnb7: 'replay',
  gnb8: 'area-search',
};

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