import type { Metadata } from "next";
import { ContentCard } from "@/components/site/ContentCard";
import { prisma } from "@/lib/prisma";

export const metadata: Metadata = {
  title: "Blog",
  description: "Read Just Chill Nepal blogs, guides, routes, and destination notes."
};

export default async function ArticlesPage() {
  const posts = await prisma.post.findMany({
    where: { approvalStatus: "APPROVED", status: "PUBLISHED" },
    include: { category: true },
    orderBy: { publishedAt: "desc" }
  });

  return (
    <main className="container" style={{ padding: "4rem 1.25rem" }}>
      <div className="section-head">
        <div>
          <span className="pill">Blogs and guides</span>
          <h1 className="section-title">Just Chill Nepal Blog</h1>
          <p className="muted">Practical Nepal blogs, guides, destination ideas, and useful updates.</p>
        </div>
      </div>
      <div className="blog-grid" style={{ marginTop: "2rem" }}>
        {posts.map((post) => (
          <ContentCard
            category={post.category?.name}
            date={post.publishedAt}
            excerpt={post.excerpt}
            href={`/articles/${post.slug}`}
            image={post.coverImage}
            key={post.id}
            title={post.title}
          />
        ))}
      </div>
    </main>
  );
}