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

export const metadata: Metadata = {
  title: blog.name,
  description: blog.description,
  alternates: { canonical: BLOG_PATH },
  openGraph: {
    title: blog.name,
    description: blog.description,
    url: BLOG_PATH,
    type: "website",
  },
};

export default async function BlogIndex() {
  const posts = await listPublishedPosts();
  const cards = categories
    .map((c) => ({
      ...c,
      count: posts.filter((p) => p.category === c.slug).length,
    }))
    .filter((c) => c.count > 0);

  return (
    <div className="mx-auto max-w-6xl px-4 py-14 sm:px-6">
      <JsonLd data={breadcrumbLd([crumbs.index])} />
      <PageIntro title={blog.name}>
        <p>{blog.description}</p>
      </PageIntro>
      <p className="mt-6 flex flex-wrap gap-x-6 gap-y-2 font-medium">
        <Link
          href={RECENT_PATH}
          className="text-blog-link underline-offset-2 hover:underline"
        >
          See the most recent posts
        </Link>
        <Link
          href={UPDATED_PATH}
          className="text-blog-link underline-offset-2 hover:underline"
        >
          See the most recently updated posts
        </Link>
      </p>
      <ul className="mt-10 grid gap-5 sm:grid-cols-2 lg:grid-cols-3">
        {cards.map((c) => (
          <li key={c.slug}>
            <Link
              href={categoryPath(c.slug)}
              className="bg-blog-soft ring-blog-line hover:ring-blog-accent flex h-full flex-col rounded-2xl p-6 ring-1 transition hover:-translate-y-0.5"
            >
              <h2 className="text-blog-ink text-xl font-bold">{c.name}</h2>
              <p className="text-blog-muted mt-2 flex-1 leading-relaxed">
                {c.description}
              </p>
              <p className="text-blog-link mt-4 text-sm font-semibold">
                {c.count} {c.count === 1 ? "post" : "posts"}
              </p>
            </Link>
          </li>
        ))}
      </ul>
    </div>
  );
}