'use client'; import clsx from 'clsx'; import { useProduct, useUpdateURL } from 'components/product/product-context'; import { ProductOption, ProductVariant } from 'lib/shopify/types'; type Combination = { id: string; availableForSale: boolean; [key: string]: string | boolean; }; export function VariantSelector({ options, variants }: { options: ProductOption[]; variants: ProductVariant[]; }) { const { state, updateOption } = useProduct(); const updateURL = useUpdateURL(); const hasNoOptionsOrJustOneOption = !options.length || (options.length === 1 && options[0]?.values.length === 1); if (hasNoOptionsOrJustOneOption) { return null; } const combinations: Combination[] = variants.map((variant) => ({ id: variant.id, availableForSale: variant.availableForSale, ...variant.selectedOptions.reduce( (accumulator, option) => ({ ...accumulator, [option.name.toLowerCase()]: option.value }), {} ) })); return options.map((option) => (
)); }