import Link from "next/link";
import { PenLine } from "lucide-react";
import { ArticleCard } from "@/components/article-card";
import { getPublishedArticles } from "@/lib/data";
import { siteMetadata } from "@/lib/seo";

export const dynamic = "force-dynamic";
export const metadata = siteMetadata({ title: "Blogs", path: "/blog" });

export default async function BlogPage() {
  const articles = await getPublishedArticles(18);
  return (
    <section className="px-4 py-12 sm:px-6 lg:px-8">
      <div className="mx-auto max-w-7xl">
        <div className="flex flex-col justify-between gap-5 sm:flex-row sm:items-end">
          <div>
            <p className="font-display text-xs font-bold uppercase tracking-[.28em] text-cyanx">Creator network</p>
            <h1 className="mt-3 font-display text-4xl font-black text-white">Infomix Blogs</h1>
          </div>
          <Link href="/dashboard/new" className="inline-flex w-fit items-center gap-2 rounded-full bg-cyanx px-5 py-3 text-sm font-black text-ink">
            <PenLine size={17} /> Submit a blog
          </Link>
        </div>
        <div className="mt-8 grid gap-6 md:grid-cols-2 lg:grid-cols-3">
          {articles.map((article) => <ArticleCard key={article.id} article={article} />)}
        </div>
      </div>
    </section>
  );
}