import Image from "next/image";
import { listBlogs } from "@/lib/meshkee";

export async function Articles() {
  const { items } = await listBlogs({ page: 1, pageSize: 6, type: "blog" });
  const articles = items.slice(0, 6);

  return (
    <section id="articles" className="section section-gray">
      <div className="container-page">
        <div className="section-head">
          <h2>آخرین مقالات</h2>
          <p>Latest Articles</p>
        </div>

        <div className="grid gap-5 sm:grid-cols-2 xl:grid-cols-3">
          {articles.map((article) => (
            <article
              key={article.id}
              className="card-shadow overflow-hidden bg-white"
            >
              <a
                href={`/articles/${article.slug}`}
                className="block overflow-hidden bg-[#f3f3f3]"
              >
                {article.image ? (
                  <Image
                    src={article.image}
                    alt={article.title}
                    width={800}
                    height={600}
                    unoptimized
                    className="h-auto w-full object-contain"
                    sizes="(max-width: 768px) 100vw, 33vw"
                  />
                ) : null}
              </a>
              <div className="p-4">
                <h3 className="mb-3 min-h-14 text-[15px] font-bold leading-7 text-[#232323]">
                  <a href={`/articles/${article.slug}`}>{article.title}</a>
                </h3>
                <p className="mb-4 line-clamp-3 text-sm leading-7 text-[#777]">
                  {article.excerpt}
                </p>
                <a
                  href={`/articles/${article.slug}`}
                  className="inline-flex items-center gap-1 text-sm font-bold text-[#232323]"
                >
                  بیشتر بخوانید
                  <span aria-hidden>›</span>
                </a>
              </div>
            </article>
          ))}
        </div>

        <div className="mt-8 text-center">
          <a href="/articles" className="btn-more">
            مشاهده همه مقالات
          </a>
        </div>
      </div>
    </section>
  );
}
