import React, { Suspense } from 'react';
import type { Metadata } from 'next';
import { getProducts, getWooCommerceCategories } from '@/lib/wpgraphql';
import { getStoreSettings } from '@/lib/settings';
import { siteConfig } from '@/config/site';
import ShopClient from '@/components/shop/ShopClient';

export const revalidate = 60;

export const metadata: Metadata = {
  title: 'Shop All Products — Hayat Supplements',
  description: 'সব খাঁটি ও অর্গানিক পণ্য এক জায়গায় — খাঁটি মধু, ভেষজ, বাদাম ও প্রিমিয়াম ঘি। সারাদেশে ক্যাশ অন ডেলিভারি।',
  alternates: {
    canonical: `${siteConfig.seo.siteUrl}/shop`,
  },
  openGraph: {
    title: 'Shop All Products — Hayat Supplements',
    description: 'সব খাঁটি ও অর্গানিক পণ্য এক জায়গায় — খাঁটি মধু, ভেষজ, বাদাম ও প্রিমিয়াম ঘি। সারাদেশে ক্যাশ অন ডেলিভারি।',
    url: `${siteConfig.seo.siteUrl}/shop`,
  },
};

export default async function ShopPage() {
  const [products, settings, categories] = await Promise.all([
    getProducts(),
    getStoreSettings(),
    getWooCommerceCategories(),
  ]);

  return (
    <Suspense fallback={<div className="wrap" style={{ padding: '40px 0', textAlign: 'center' }}>Loading products...</div>}>
      <ShopClient
        initialProducts={products}
        shopSettings={settings.shop}
        categories={categories}
        hoverTags={settings.product_page?.hover_tags}
      />
    </Suspense>
  );
}