import { NavLink, Outlet } from 'react-router-dom';
import { useAuth } from '../../context/AuthContext.jsx';

const baseTabs = [
  { to: '/admin', label: 'Overview', end: true },
  { to: '/admin/vendors', label: 'Vendors' },
  { to: '/admin/courses', label: 'Courses & Exams' },
  { to: '/admin/import', label: 'Import' },
  { to: '/admin/approvals', label: 'Approvals' },
];

// Users & Finance are super-admin only.
const superAdminTabs = [
  { to: '/admin/users', label: 'Users' },
  { to: '/admin/finance', label: 'Finance' },
];

export default function AdminLayout() {
  const { isSuperAdmin } = useAuth();
  const tabs = isSuperAdmin ? [...baseTabs, ...superAdminTabs] : baseTabs;

  return (
    <div className="container page">
      <h1>Admin {isSuperAdmin && <span className="badge badge-amber" style={{ verticalAlign: 'middle' }}>Super Admin</span>}</h1>
      <div className="row wrap mb-3" style={{ gap: 6, borderBottom: '1px solid var(--line)', paddingBottom: 8 }}>
        {tabs.map((t) => (
          <NavLink key={t.to} to={t.to} end={t.end}
            className={({ isActive }) => `nav-link ${isActive ? 'active' : ''}`}>
            {t.label}
          </NavLink>
        ))}
      </div>
      <Outlet />
    </div>
  );
}
