import { ProductGrid } from "@/components/products/ProductGrid";
import { Section } from "@/components/ui/Section";
import { Heading, Text } from "@/components/ui/Typography";
import { getBoxProducts } from "lib/shopify";

export default async function TestBoxesPage() {
  const boxes = await getBoxProducts({
    sortKey: 'CREATED_AT',
    reverse: true
  });
  
  return (
    <Section>
      <div className="mb-6">
        <Heading level={1}>Test Box Products</Heading>
        <Text>Found {boxes.length} box products. This is a temporary test page.</Text>
      </div>
      
      {boxes.length === 0 ? (
        <div className="p-12 text-center bg-gray-100 rounded-lg">
          <Text size="lg" className="font-semibold">No box products found</Text>
          <Text className="mt-2">Try adding products with 'box' in the title or with the 'box' tag.</Text>
        </div>
      ) : (
        <ProductGrid products={boxes} title="Box Products" />
      )}
    </Section>
  );
}