"use client";

import type { ReactNode } from "react";
import { usePathname } from "next/navigation";

// The root layout always renders the sidebar nav, command palette, and
// auto-refresh. The read-only monitor widget (/widget) is meant to be embedded
// in a small pinned window or iframe, so it needs none of that chrome. Since the
// App Router root layout can't be skipped, this client wrapper hides the chrome
// on exactly that route and renders a bare, full-bleed main instead.
//
// Matched exactly on "/widget" so the builder (/widget/builder) keeps the shell.
export function AppFrame({
  sidebar,
  extras,
  children,
}: {
  sidebar: ReactNode;
  extras: ReactNode;
  children: ReactNode;
}) {
  const pathname = usePathname();
  const bare = pathname === "/widget";

  if (bare) {
    return <main className="flex-1 min-w-0 min-h-full">{children}</main>;
  }

  return (
    <>
      {sidebar}
      <main className="flex-1 min-w-0 px-4 md:px-6 py-4 md:py-6">{children}</main>
      {extras}
    </>
  );
}