/* eslint-disable react/forbid-prop-types */
import React, { memo, Suspense } from 'react';
import PropTypes from 'prop-types';
import { getCard } from '../../../../../helpers/cards';
import keygen from '~helpers/keygen';

const CustomCardComponent = memo(({ module, item, page, index, template = 'template_five' }) => {
  const Compo = getCard(module.model_type || module.cards_page_type, template);
  return (
    <Suspense fallback={<></>}>
      <Compo
        key={keygen()}
        featured={module.style === 'featured'}
        item={item}
        type={item.type}
        number={index + 1}
        page={page}
      />
    </Suspense>
  );
});

CustomCardComponent.propTypes = {
  page: PropTypes.shape({}),
  module: PropTypes.shape({
    items: PropTypes.array,
    style: PropTypes.string,
    model_type: PropTypes.string,
    cards_page_type: PropTypes.string,
  }),
  item: PropTypes.shape({
    type: PropTypes.string,
  }),
  index: PropTypes.number,
  template: PropTypes.string,
};

export default CustomCardComponent;
