import Link from 'next/link';
import { UserButton } from '@clerk/nextjs';

// All dashboard routes call Clerk's auth() server-side; they MUST be
// dynamic, otherwise Next 16 tries to SSG them at build time and Clerk
// errors with "Missing publishableKey" (env vars aren't injected for SSG).
export const dynamic = 'force-dynamic';

export default function DashboardLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <div className="flex min-h-screen flex-col">
      <header className="border-b border-neutral-200">
        <div className="mx-auto flex max-w-5xl items-center justify-between px-6 py-4">
          <Link href="/dashboard" className="font-semibold">{{project_name}}</Link>
          <nav className="flex items-center gap-6 text-sm">
            <Link href="/dashboard">Home</Link>
            <Link href="/dashboard/billing">Billing</Link>
            <UserButton afterSignOutUrl="/" />
          </nav>
        </div>
      </header>
      <main className="mx-auto w-full max-w-5xl flex-1 px-6 py-8">
        {children}
      </main>
    </div>
  );
}
