import { Outlet, useNavigate, useLocation } from 'react-router';
import { Tabs } from '@cameleer/design-system';

const ADMIN_TABS = [
  { label: 'User Management', value: '/admin/rbac' },
  { label: 'Audit Log', value: '/admin/audit' },
  { label: 'OIDC', value: '/admin/oidc' },
  { label: 'App Config', value: '/admin/appconfig' },
  { label: 'Database', value: '/admin/database' },
  { label: 'OpenSearch', value: '/admin/opensearch' },
];

export default function AdminLayout() {
  const navigate = useNavigate();
  const location = useLocation();

  return (
    <div>
      <Tabs
        tabs={ADMIN_TABS}
        active={location.pathname}
        onChange={(path) => navigate(path)}
      />
      <div style={{ padding: '20px 24px 40px' }}>
        <Outlet />
      </div>
    </div>
  );
}