import Link from 'next/link';
import { ReactNode } from 'react';

const nav = [
  ['Dashboard', '/dashboard'],
  ['Profile', '/profile'],
  ['Training', '/training'],
  ['Documents', '/documents'],
  ['Signatures', '/signatures'],
  ['Uploads', '/uploads'],
  ['Review', '/review']
];

export function AppLayout({ children }: { children: ReactNode }) {
  return (
    <div className="shell">
      <header className="header">
        <div className="header-inner">
          <Link href="/dashboard" className="brand" aria-label="Grid Electric Onboarding Dashboard">
            <div className="logo-mark">GE</div>
            <div>
              <h1>Grid Electric</h1>
              <p>Onboarding Portal</p>
            </div>
          </Link>
          <nav className="nav" aria-label="Primary navigation">
            {nav.map(([label, href]) => <Link key={href} href={href}>{label}</Link>)}
          </nav>
        </div>
      </header>
      <main className="main">{children}</main>
      <footer className="footer">
        <div className="footer-inner">Grid Electric Corp Onboarding Portal. Growth Respect Integrity Duty</div>
      </footer>
    </div>
  );
}