مكونات الخادم والعميل

// الإجابة الصحيحة:

// 1. BlogPostPage → Server Component
//    يجلب البيانات من DB - مثالي للخادم
export default async function BlogPostPage({ params }) {
  const post = await db.getPost(params.slug);
  return (
    <div>
      <PostContent post={post} />
      <LikeButton postId={post.id} />
      <CommentSection postId={post.id} />
      <AuthorInfo authorId={post.authorId} />
      <ShareButtons title={post.title} />
    </div>
  );
}

// 2. PostContent → Server Component (عرض فقط)
export function PostContent({ post }) {
  return <article><h1>{post.title}</h1><p>{post.content}</p></article>;
}

// 3. LikeButton → Client Component (useState)
"use client";
export function LikeButton({ postId }) {
  const [liked, setLiked] = useState(false);
  return <button onClick={() => setLiked(!liked)}>{liked ? "❤️" : "🤍"}</button>;
}

// 4. CommentSection → Client Component (useState + events)
"use client";
export function CommentSection({ postId }) {
  const [comments, setComments] = useState([]);
  return <div>...</div>;
}

// 5. AuthorInfo → Server Component (عرض فقط)
export function AuthorInfo({ authorId }) {
  const author = await db.getAuthor(authorId);
  return <div><img src={author.avatar} /><span>{author.name}</span></div>;
}

// 6. ShareButtons → Client Component (onClick)
"use client";
export function ShareButtons({ title }) {
  return <button onClick={() => alert("مشاركة: " + title)}>مشاركة</button>;
}