// NO "use client" here. This is a Server Component.

import { getSortedPostsData, getAllTags } from "@/lib/posts";
import { FilterableResearchGrid } from "@/components/filterable-research-list"; // Import the new client component

export default function ResearchPage() {
  // These functions run safely on the server because this is a Server Component.
  const allPosts = getSortedPostsData("research");
  const allTags = getAllTags(5, "research");

  return (
    <main className="flex flex-col min-h-[100dvh] space-y-10">
      <section id="research">
        <div className="mx-auto w-full max-w-6xl space-y-8 px-4">
          <div className="space-y-2">
            <h1 className="text-3xl font-bold tracking-tighter sm:text-5xl xl:text-6xl/none mt-12">
              Research
            </h1>
            <p className="max-w-3xl text-muted-foreground">
              This section details my scientific publications, primarily focused
              on advancing machine learning and deep neural networks. My
              involvement has spanned, from conceptualizing the ideas and
              developing machine learning models, to providing support to my
              colleagues.
            </p>
          </div>
          <hr />

          <FilterableResearchGrid posts={allPosts} tags={allTags} />

        </div>
      </section>
    </main>
  );
}