import Link from "next/link";

import { AppSidebar } from "@/components/app-sidebar";

export default function TreesLayout({ children }: { children: React.ReactNode }) {
  return (
    <div className="flex min-h-screen">
      <aside className="sticky top-0 hidden h-screen w-64 shrink-0 border-r border-[var(--border)] bg-[var(--surface)] md:flex md:flex-col">
        <AppSidebar />
      </aside>

      <div className="flex min-w-0 flex-1 flex-col">
        {/* Compact bar for small screens (full sidebar is md+). */}
        <div className="flex items-center justify-between border-b border-[var(--border)] bg-[var(--surface)] px-4 py-3 md:hidden">
          <Link href="/" aria-label="Provenance — home">
            {/* eslint-disable-next-line @next/next/no-img-element */}
            <img src="/provenance-logo-plain.svg" alt="Provenance" className="h-6 w-auto" />
          </Link>
          <Link href="/trees" className="text-sm text-bronze">
            Trees
          </Link>
        </div>

        <div className="mx-auto w-full max-w-4xl px-6 py-10 md:px-10">{children}</div>
      </div>
    </div>
  );
}