import type { Metadata } from "next";

import { Container } from "@/components/Container";
import { PageHeader } from "@/components/PageHeader";
import { BlogGrid } from "@/components/blog/BlogGrid";
import { listUnifiedPosts } from "@/lib/blog/unified";

export const metadata: Metadata = {
  title: "Blog",
  description:
    "Patient-facing orthopaedic education from OrthoGlobe — conditions, procedures, recovery, and care.",
};

export const dynamic = "force-dynamic";

export default async function BlogIndexPage() {
  const posts = await listUnifiedPosts();
  // Map to the shape BlogGrid expects — legacy + DB posts flow through the
  // same component so filtering, layout, and design stay consistent.
  const cards = posts.map((p) => ({
    id: p.id as unknown as number,
    slug: p.slug,
    title: p.title,
    excerpt: p.excerpt,
    date: p.date ?? "",
    featuredImage: p.featuredImage ?? "",
    topic: p.topic,
  }));

  return (
    <>
      <PageHeader
        eyebrow="Blog"
        title="Orthopaedic education, written for patients."
        lede="Plain-language articles on common orthopaedic conditions, procedures, and recovery — curated by the OrthoGlobe collaborative."
      />
      <Container className="pb-24">
        <BlogGrid posts={cards} />
      </Container>
    </>
  );
}
