// default server network boundary

// because these are IMPORTED here...
import ServerAsync from "./serverAsync";
import Shared from "./shared";

import Client from "./client";

export default function Page() {
  return (
    <div>
      <p>I am a server component</p>
      <ServerAsync />
      <Shared />
      {/* despite being children */} 
      {/* of a Client Component */}
      <Client>
        {/* they remain in the current */}
        {/* server network boundary */}
        <ServerAsync />
        <Shared />
      </Client>
      {/* we can pass also components as props */}
      {/* just like they are children */}
      <Client header={<ServerAsync />} />
    </div>
  );
}

"use client"; // client network boundary

// because the shared component is imported here...
import Shared from "./shared";

export default function Client({
  children,
  header,
}: {
  children?: React.ReactNode;
  header?: React.ReactNode;
}) {
  return (
    <div>
      {/* it is turned into a client component */}
      <Shared />
      {/* but the same component passed as a prop */}
      {/* will remain a server component */}
      {header && <h2>{header}</h2>}
      {children}
    </div>
  );
}