import Link from "next/link";
import { articlesByLocale } from "@/content/articles";
import { publishedArticleSlugs, type Locale } from "@/content/site";

export function KnowledgeGrid({ locale, limit }: { locale: Locale; limit?: number }) {
  const approvedArticles = articlesByLocale[locale].filter((article) =>
    publishedArticleSlugs.includes(article.slug),
  );
  const articles = limit ? approvedArticles.slice(0, limit) : approvedArticles;
  if (articles.length === 0) return null;

  return (
    <div className="knowledge-grid">
      {articles.map((article, index) => (
        <article className="knowledge-card" key={article.slug}>
          <div className="knowledge-meta">
            <span>{article.type}</span>
            <span>{article.readingTime}</span>
          </div>
          <span className="knowledge-number">{String(index + 1).padStart(2, "0")}</span>
          <h3>
            <Link href={`/${locale}/knowledge/${article.slug}/`}>{article.title}</Link>
          </h3>
          <p>{article.summary}</p>
        </article>
      ))}
    </div>
  );
}