import { Article } from "@/server/db/schema";
import React from "react";
import ArticleCard from "../article-card";
import { Skeleton } from "../../ui/skeleton";

export const ARTICLE_GRID_CLASS = "grid grid-cols-1 gap-4 lg:grid-cols-2";

function ArticleGrid({ articles }: { articles: Article[] }) {
  return (
    <menu className={ARTICLE_GRID_CLASS}>
      {articles.map((article) => (
        <li key={article.slug} className="h-full">
          <ArticleCard {...article} />
        </li>
      ))}
    </menu>
  );
}

export default ArticleGrid;

export function ArticleGridSkeleton() {
  const range = Array.from(new Array(6).keys());
  return (
    <ul className={ARTICLE_GRID_CLASS}>
      {range.map((i) => (
        <li key={i}>
          <Skeleton className="h-12 w-full" />
        </li>
      ))}
    </ul>
  );
}
