import Link from 'next/link';
import { useRouter } from 'next/router';

const navLinks = [
  { href: '/admin', label: 'Dashboard' },
  { href: '/admin/menu', label: 'Menu' },
  { href: '/admin/orders', label: 'Orders' },
  { href: '/admin/inventory', label: 'Inventory' },
  { href: '/admin/delivery', label: 'Delivery' },
];

export function AdminLayout({ children, title = 'Admin' }) {
  const router = useRouter();
  return (
    <div className="admin-shell">
      <div className="admin-container">
        <header style={{ marginBottom: '2.5rem' }}>
          <div className="admin-badge">Full Moon Bakehouse Operations</div>
          <h1 className="admin-section-title">{title}</h1>
          <nav className="admin-nav" style={{ marginTop: '1.2rem' }}>
            {navLinks.map((link) => {
              const isActive = router.pathname.startsWith(link.href);
              return (
                <Link
                  key={link.href}
                  href={link.href}
                  className={isActive ? 'active' : 'inactive'}
                >
                  {link.label}
                </Link>
              );
            })}
          </nav>
        </header>
        <section className="admin-card">{children}</section>
      </div>
    </div>
  );
}