"use client";

import { useArticleList } from "../hooks/use-article-list";
import { ArticleCard } from "./article-card";

export function ArticleList() {
  const { data: articles } = useArticleList();

  if (articles.length === 0) {
    return <p className="text-muted-foreground">No published articles yet.</p>;
  }

  return (
    <div className="grid gap-4">
      {articles.map((article) => (
        <ArticleCard key={article.id} article={article} />
      ))}
    </div>
  );
}