import { getPaginatedPosts } from "@/lib/posts";
import { FeaturedPost } from "@/components/blog/FeaturedPost";
import { BlogCard } from "@/components/blog/BlogCard";
import { Metadata } from "next";

export const metadata: Metadata = {
  title: "Prejee Blog - Latest Insights and Updates",
  description: "Read our latest blog posts about artificial intelligence, agentic learning, education technology, and more insights from the Prejee team.",
  keywords: "blog, artificial intelligence, agentic learning, education, technology, Prejee",
  openGraph: {
    title: "Prejee Blog - Latest Insights and Updates",
    description: "Read our latest blog posts about artificial intelligence, agentic learning, education technology, and more insights from the Prejee team.",
    type: "website",
    siteName: "Prejee",
  },
  twitter: {
    card: "summary_large_image",
    title: "Prejee Blog - Latest Insights and Updates",
    description: "Read our latest blog posts about artificial intelligence, agentic learning, education technology, and more insights from the Prejee team.",
  },
  alternates: {
    canonical: "/labs",
  },
};

export default function BlogPage() {
  const initialData = getPaginatedPosts(7); // Fetch one more for featured post

  // Split posts between featured and regular grid
  const featuredPost = initialData.page.length > 0 ? initialData.page[0] : null;
  const gridPosts = initialData.page.length > 0 ? initialData.page.slice(1) : [];

  return (
    <section className="py-20 z-5 lg:mx-12 mx-2">
      <div className="max-w-7xl px-6 lg:px-8 mx-auto">
        <div className="flex flex-col gap-y-2 justify-center items-center mb-10">
          <h1 className="text-4xl font-medium relative inline-block" id="blog-title">
            The Prejee Blog
          </h1>
          <hr
            className="border-b-2 mt-1"
            style={{
              width: "fit-content",
              minWidth: 0,
              maxWidth: "100%",
              margin: "0 auto",
            }}
          />
        </div>

        {/* Featured Post */}
        {featuredPost && <FeaturedPost post={featuredPost} />}

        {/* Grid Posts */}
        <div className="grid grid-cols-1 md:grid-cols-2 gap-x-8 gap-y-16">
          {gridPosts.map((post) => (
            <BlogCard key={post._id} post={post} />
          ))}
        </div>

        {initialData.page.length === 0 && (
          <div className="text-center py-12">
            <p className="text-muted-foreground">No blog posts found.</p>
          </div>
        )}

        {/* Note: Load more functionality would need to be implemented as a client component if needed */}
      </div>
    </section>
  );
}