"use client";

import { useState } from "react";

export function Counter() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>العدد: {count}</p>
      <button onClick={() => setCount(count + 1)}>+</button>
    </div>
  );
}

// app/actions.ts
"use server";

export async function createUser(formData: FormData) {
  const http = new HttpClient("/api");
  const user = await http.post("/users", {
    name: formData.get("name"),
    email: formData.get("email"),
  });
  return user;
}

// app/users/page.tsx
import { HttpClient, UserDTO } from "./lib/react-base-repository";

// هذا المكوّن يعمل على الخادم فقط — لا يصل أبداً للعميل
async function UsersPage() {
  const http = new HttpClient("https://api.example.com");
  const users: UserDTO[] = await http.get("/users");

  return (
    <ul>
      {users.map((u) => (
        <li key={u.id}>{u.name} — {u.email}</li>
      ))}
    </ul>
  );
}

 اللوحة (Server Component)
   ├── <Header />          (Server — بيانات من DB)
   ├── <Suspense>
   │     └── <Profile />  (Server — بيانات متدفقة)
   └── <Counter>           (Client — "use client")
         └── {children}    (Server Component كلوحة فرعية)