import { getBoxProducts } from "lib/shopify";
import { BoxOption } from "./BuildBoxCustomizeClient";
import { BuildBoxCustomizePageContent } from "./client/BuildBoxCustomizePageContent";

export async function BuildBoxCustomizePage() {
  // Fetch boxes from the API
  const boxes = await getBoxProducts({
    sortKey: 'CREATED_AT',
    reverse: true
  });
  
  // Convert products to box options for display
  const boxOptions: BoxOption[] = boxes.map(box => ({
    id: box.id,
    title: box.title,
    price: parseFloat(box.priceRange.minVariantPrice.amount),
    image: box.featuredImage?.url || '/placeholder-box.jpg'
  }));

  return <BuildBoxCustomizePageContent boxes={boxOptions} />;
}