{
  intent: 'related' | 'complementary';
  productId: string;
  products: Connection<ProductSummary>;
  meta: {
    limit: number;
    count: number;      // se 0, não renderize a section
    strategies: string[];
  };
}

import { defineSection, defineSectionData, SECTION_DATA_KEYS } from '@corvex/theme-sdk';

export const schema = defineSection({
  name: 'Você também pode gostar',
  enabledOn: ['product'],
  data: [SECTION_DATA_KEYS.recommendations, SECTION_DATA_KEYS.product],
  settings: [
    { type: 'range', id: 'limit', label: 'Quantidade', min: 2, max: 10, default: 4 },
    {
      type: 'select',
      id: 'intent',
      label: 'Tipo',
      default: 'related',
      options: [
        { value: 'related', label: 'Relacionados' },
        { value: 'complementary', label: 'Complementares' },
      ],
    },
  ],
});

export const data = defineSectionData(async ({ storefront, page, settings }) => ({
  recommendations: await storefront.recommendations.list({
    product: page.product,
    first: settings.limit ?? 4,
    intent: settings.intent ?? 'related',
  }),
}));

export default function ProductRecommendations({ data }) {
  if (!data.recommendations.meta.count) return null;

  return (
    <section>
      <h2>Você também pode gostar</h2>
      {data.recommendations.products.nodes.map((product) => (
        <ProductCard key={product.id} product={product} />
      ))}
    </section>
  );
}

const { data, loading } = useCorvexData({
  recommendations: {
    product: currentProductId,
    first: 4,
    intent: 'related',
  },
});

data: ['recommendations', 'product']