import {
  Breadcrumb,
  JsonLd,
  PageIntro,
  PostList,
} from "@/components/blog/parts";
import { blog } from "@/lib/blog/config";
import { breadcrumbLd, crumbs } from "@/lib/blog/feeds";
import { listPublishedPosts } from "@/lib/blog/loader";
import {
  BLOG_PATH,
  RECENT_PATH,
  RECENT_POST_LIMIT,
  UPDATED_PATH,
} from "@/lib/blog/routes";
import type { Metadata } from "next";
import Link from "next/link";

const title = `Recent posts | ${blog.name}`;
const description = `The newest posts from every category of the ${blog.name}, most recent first.`;

export const metadata: Metadata = {
  title,
  description,
  alternates: { canonical: RECENT_PATH },
  openGraph: { title, description, url: RECENT_PATH },
};

export default async function RecentPosts() {
  const posts = (await listPublishedPosts()).slice(0, RECENT_POST_LIMIT);
  return (
    <div className="mx-auto max-w-3xl px-4 py-14 sm:px-6">
      <JsonLd
        data={breadcrumbLd([
          crumbs.index,
          { name: "Recent posts", path: RECENT_PATH },
        ])}
      />
      <Breadcrumb
        items={[{ name: "Blog", href: BLOG_PATH }, { name: "Recent posts" }]}
      />
      <div className="mt-6">
        <PageIntro title="Recent posts">
          <p>The newest posts from every category, most recent first.</p>
        </PageIntro>
      </div>
      <p className="mt-4 font-medium">
        <Link href={UPDATED_PATH} className="text-blog-link hover:underline">
          See the most recently updated posts
        </Link>
      </p>
      <div className="mt-8">
        <PostList posts={posts} />
      </div>
    </div>
  );
}