import { ProductLayout } from '@threekit-tools/treble';
import React, { useEffect, useState } from 'react';
import { getConfigInfo } from '../store/selectors/selectors';
import { ProductComponent } from './../mainComponents/ProductComponent/ProductComponent';
import { useStoreSelector } from '../App';
const products = {
  Jeep2DoorJL: {
    preview: { assetId: 'c19abbb1-1141-4d66-ba89-bd20984a9f54' },
  },
  Jeep4DoorJL: {
    preview: { assetId: 'bf1ef605-0c1d-459f-9557-738aed1a61b8' },
  },
  JeepGladiator: {
    preview: { assetId: '1e730ee6-e684-428c-84e7-264675d001c3' },
  },
};
export default function Product() {
  const [setCheckLoadConfig] = useState(false);
  const configInfo = useStoreSelector(getConfigInfo);

  useEffect(() => {
    if (configInfo.isShortId) {
      setCheckLoadConfig(configInfo.isShortId);
    }
  }, [configInfo.isShortId]);

  return (
    <ProductLayout products={products}>
      <ProductComponent />
    </ProductLayout>
  );
}