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

const links = [
  { to: '/admin', label: '概览', end: true },
  { to: '/admin/users', label: '用户管理' },
  { to: '/admin/billing', label: '账单记录' },
  { to: '/admin/wechat', label: '服务号管理' },
];

export function AdminLayout() {
  return (
    <div className="layout">
      <header>
        <h1>超级管理后台</h1>
        <p style={{ color: '#68716c' }}>用户、计费与服务号</p>
      </header>
      <nav className="nav">
        <NavLink
          to="/"
          style={{ opacity: 0.6 }}
        >
          ← 运营后台
        </NavLink>
        {links.map((link) => (
          <NavLink
            key={link.to}
            to={link.to}
            end={link.end}
            className={({ isActive }) => (isActive ? 'active' : undefined)}
          >
            {link.label}
          </NavLink>
        ))}
      </nav>
      <Outlet />
    </div>
  );
}