"use client";

/**
 * PostsGrid — client-side body for /u/[handle] (Posts tab).
 *
 * Split out from page.tsx so the page itself can be a server component that
 * exports `generateMetadata` for the public-profile OG card. The
 * /u/[handle]/layout.tsx still owns ProfileHeader + tab strip + the outer
 * container (and 404s unknown handles); this just renders the post grid.
 *
 * Window-virtualised, infinite-scroll 2-up grid (usePostScrollFeed keyset-pages
 * the user's posts). Tapping a thumbnail jumps to /u/[handle]/posts#post-<id>
 * where the scroll feed shows the full passages.
 */

import { use } from "react";
import { profile } from "@/lib/social";
import { VirtualPostGrid } from "@/components/social/post/virtual-post-grid";
import { usePostScrollFeed } from "@/components/social/post/use-post-scroll-feed";
import { usePublicProfile } from "./profile-context";

export function PostsGrid({
  params,
}: {
  params: Promise<{ handle: string }>;
}) {
  const { handle } = use(params);
  const data = usePublicProfile();
  const { feed, loading, hasMore, sentinelRef } = usePostScrollFeed(
    (before, limit) =>
      profile.feed(handle, { limit, before: before ?? undefined }),
    24,
  );

  return (
    <VirtualPostGrid
      posts={feed}
      loading={loading}
      hasMore={hasMore}
      sentinelRef={sentinelRef}
      hrefFor={(p) => `/u/${data.handle}/posts#post-${p.id}`}
      emptyMessage="No posts yet — quotes shared by this user will appear here."
    />
  );
}