import { Flame } from "lucide-react";
import { ArticleCard } from "@/components/article-card";
import { articleInclude } from "@/lib/data";
import { prisma } from "@/lib/prisma";
import { siteMetadata } from "@/lib/seo";

export const dynamic = "force-dynamic";
export const metadata = siteMetadata({ title: "Trending Topics", path: "/trending" });

export default async function TrendingPage() {
  const articles = await prisma.article.findMany({
    where: { status: "PUBLISHED" },
    include: articleInclude,
    orderBy: [{ views: "desc" }, { publishedAt: "desc" }],
    take: 18
  });
  const tags = await prisma.tag.findMany({ include: { _count: { select: { articles: true } } }, take: 20 });

  return (
    <section className="px-4 py-12 sm:px-6 lg:px-8">
      <div className="mx-auto max-w-7xl">
        <p className="flex items-center gap-2 font-display text-xs font-bold uppercase tracking-[.28em] text-cyanx"><Flame size={16} /> Trend radar</p>
        <h1 className="mt-3 font-display text-4xl font-black text-white">Trending Topics</h1>
        <div className="mt-6 flex flex-wrap gap-2">
          {tags.map((tag) => (
            <a href={`/search?q=${tag.slug}`} key={tag.id} className="rounded-full border border-white/12 px-4 py-2 text-sm text-white/72 hover:border-cyanx hover:text-cyanx">
              #{tag.name} <span className="text-white/36">{tag._count.articles}</span>
            </a>
          ))}
        </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>
  );
}