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

export const metadata = pageMetadata({
  title: "فروشگاه تجهیزات سرور",
  description: "مشاهده و جستجوی محصولات فروشگاهی آریا شبکه پیشرو شامل سرور HP، رم سرور، هارد سرور، CPU و تجهیزات شبکه.",
  path: "/store"
});

export default async function StorePage({ searchParams }) {
  const resolvedSearchParams = await searchParams;
  const query = resolvedSearchParams?.q || "";
  const { items, fallback } = await getStoreItems({ pageSize: 16, query });

  return (
    <PageShell>
      <section className="page-hero store-hero">
        <div className="container">
          <span>STORE ITEMS</span>
          <h1>فروشگاه تجهیزات سرور</h1>
          <p>لیست محصولات فروشگاهی از Meshkee خوانده می شود و در صورت نبود داده، محصولات شاخص سایت نمایش داده می شوند.</p>
        </div>
      </section>
      <section className="section">
        <div className="container">
          <form className="store-toolbar" role="search">
            <input name="q" defaultValue={query} placeholder="جستجوی سرور، رم، هارد یا CPU" />
            <button>جستجو</button>
          </form>
          {fallback ? <p className="api-note">فعلا آیتمی از API فروشگاه برنگشت؛ نمایش محصولات نمونه فعال است.</p> : null}
          <div className="product-grid store-grid">
            {items.map((item) => (
              <Link className="product-card" href={`/store/${item.id}`} key={item.id}>
                <div className="product-image">
                  <Image src={item.image} alt={item.title} fill sizes="(max-width: 800px) 50vw, 25vw" />
                </div>
                <span>{item.category}</span>
                <h3>{item.title}</h3>
                <strong>{item.price ? `${item.price} ${item.currency}` : "تماس با فروشگاه"}</strong>
              </Link>
            ))}
          </div>
        </div>
      </section>
    </PageShell>
  );
}