// app/(account)/layout.tsx
import Link from "next/link";

const nav = [
  { href: "/account", label: "My Account" },
  { href: "/account/settings", label: "Settings" },
];

export default function AccountLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <div className="min-h-screen">
      <div className="mx-auto max-w-6xl px-4 py-6">
        {/* Header */}
        <div className="mb-6 flex items-center justify-between">
          <div>
            <h1 className="text-2xl font-semibold">Account</h1>
            <p className="text-sm opacity-70">
              Profile, password, and account settings.
            </p>
          </div>

          <Link href="/builder" className="text-sm opacity-80 hover:underline">
            ← Back to Builder
          </Link>
        </div>

        <div className="grid gap-6 md:grid-cols-[240px_1fr]">
          <aside className="rounded-xl border border-white/10 bg-white/5 p-3">
            <nav className="flex flex-col gap-1">
              {nav.map((item) => (
                <Link
                  key={item.href}
                  href={item.href}
                  className="rounded-lg px-3 py-2 text-sm opacity-80 hover:bg-white/10 hover:opacity-100"
                >
                  {item.label}
                </Link>
              ))}
              <div className="my-2 border-t border-white/10" />
              <Link
                href="/vault"
                className="rounded-lg px-3 py-2 text-sm opacity-80 hover:bg-white/10 hover:opacity-100"
              >
                My Vault
              </Link>
            </nav>
          </aside>

          <main className="rounded-xl border border-white/10 bg-white/5 p-4">
            {children}
          </main>
        </div>
      </div>
    </div>
  );
}