import Image from "next/image";
import Link from "next/link";
import { PageShell } from "../components";
import { getBlogs } from "../meshkee";
import { pageMetadata } from "../seo";

export const metadata = pageMetadata({
  title: "مقالات آریا شبکه پیشرو",
  description: "مقالات آموزشی و راهنمای خرید درباره سرور HP، رم ECC، هارد سرور، تجهیزات شبکه و انتخاب قطعات مناسب کسب و کار.",
  path: "/blog"
});

export default async function BlogPage() {
  const { items, fallback } = await getBlogs({ pageSize: 12 });

  return (
    <PageShell>
      <section className="page-hero blog-hero">
        <div className="container">
          <span>BLOG</span>
          <h1>مقالات آریا شبکه پیشرو</h1>
          <p>مقالات از Meshkee خوانده می شود و در صورت نبود داده، محتوای نمونه سایت نمایش داده می شود.</p>
        </div>
      </section>
      <section className="section">
        <div className="container">
          {fallback ? <p className="api-note">فعلا مقاله ای از API برنگشت؛ نمایش مقالات نمونه فعال است.</p> : null}
          <div className="blog-grid">
            {items.map((blog) => (
              <Link className="blog-card" href={`/blog/${blog.slug}`} key={blog.id}>
                <div className="blog-image">
                  <Image src={blog.image} alt={blog.title} fill sizes="(max-width: 800px) 100vw, 33vw" />
                </div>
                <time>{blog.date}</time>
                <h2>{blog.title}</h2>
                <p>{blog.abstract}</p>
              </Link>
            ))}
          </div>
        </div>
      </section>
    </PageShell>
  );
}