import { A, useLocation } from '@solidjs/router';

const links = [
  { href: '/admin/runtime-roles/new', label: 'Create Role' },
  { href: '/admin/role-ui-configs/new', label: 'Create Dashboard' },
  { href: '/admin/onboarding-schemas/new', label: 'Create Onboarding Flow' },
];

export default function AdminSidebar() {
  const location = useLocation();

  return (
    <aside class="sidebar">
      <div class="brand">
        <img src="/nxtgauge-logo.png" alt="NXTGAUGE" />
      </div>
      {links.map((item) => (
        <A href={item.href} class={`nav-item ${location.pathname === item.href ? 'active' : ''}`}>
          {item.label}
        </A>
      ))}
      <p class="notice">Same UI flow, simpler builder experience.</p>
    </aside>
  );
}