import { getAllBlogPosts } from "../../../lib/content";
import ContentThumbnailTemplate from "../../components/content/ContentThumbnailTemplate";
import type { Metadata } from "next";
import messages from "../../../messages/en/index";
import { routeMetadata } from "../../../lib/siteMetadata";

const blogMeta = messages.metadata.blog;

export const metadata: Metadata = routeMetadata("/blog", {
  title: blogMeta.title,
  description: blogMeta.description,
  openGraph: {
    title: blogMeta.title,
    description: blogMeta.description,
    url: "/blog",
    siteName: messages.metadata.siteName,
    type: "website",
  },
  twitter: {
    card: "summary_large_image",
    title: blogMeta.title,
    description: blogMeta.description,
  },
});

export default function BlogPage() {
  const posts = getAllBlogPosts();

  // Create slug order for consistent icon cycling
  const slugOrder = posts.map((post) => post.slug);

  return (
    <div className="min-h-screen bg-[#F4F3F1]">
      <main className="pt-16">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
          <div className="text-center mb-12">
            <h1 className="text-4xl md:text-5xl font-bold text-[var(--color-content-default-primary)] mb-4">
              {blogMeta.title}
            </h1>
            <p className="text-lg text-[var(--color-content-default-secondary)] max-w-2xl mx-auto">
              {blogMeta.description}
            </p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            {posts.map((post, index) => (
              <ContentThumbnailTemplate
                key={post.slug}
                post={post}
                slugOrder={slugOrder}
                variant={index % 2 === 0 ? "vertical" : "horizontal"}
              />
            ))}
          </div>
        </div>
      </main>
    </div>
  );
}