import type { FunctionalComponent } from 'preact';
import { createLazyComponent } from '../../core/createLazyComponent';
import type { Product3DElementFieldsProps } from './Product3DElementFields';

const LoadedProduct3DElementFields = createLazyComponent<Product3DElementFieldsProps, typeof import('./Product3DElementFields')>(
  () => import('./Product3DElementFields'),
  (module) => module.Product3DElementFields,
);

export const LazyProduct3DElementFields: FunctionalComponent<Product3DElementFieldsProps> = (props) => {
  const type = String((props.form?.values as any)?.type ?? '').trim();
  if (type !== 'product-3d') return null;
  return <LoadedProduct3DElementFields {...props} />;
};
