/* eslint-disable react/prop-types */
/* eslint-disable import/no-extraneous-dependencies */
/* eslint-disable react/destructuring-assignment */
// import React from 'react';
// import Card from 'gatsby-core-theme/src/components/organisms/cards/index';
// import { getCard } from '../../../../helpers/cards';

// export default ({ module, page }) => {
//   const customCardComponent = getCard(module?.model_type || module?.cards_page_type);

//   return (
//       <Card
//         module={module}
//         mobileColumns={1}
//         tabletColumns={2}
//         desktopColumns={3}
//         CustomCardComponent={customCardComponent}
//         pageTemplate={page?.template}
//       />
//   );
// };

/* eslint-disable camelcase */
import React, { Suspense } from 'react';
import PropTypes from 'prop-types';
import { getCard } from '../../../../helpers/cards';
import styles from './cards.module.scss';
import Card from '~atoms/cards/default-card';
import keygen from '~helpers/keygen';

const Cards = ({ module, page }) => {
  const CustomCardComponent = getCard(module?.model_type || module?.cards_page_type);

  return (
    <div className={styles.cardsContainer}>
      {module.items &&
        module.items.map((item, index) =>
          CustomCardComponent ? (
            <Suspense fallback={<></>}>
              <CustomCardComponent
                key={keygen()}
                featured={module.style === 'featured'}
                item={item}
                type={item.type}
                number={index + 1}
                page={page}
              />
            </Suspense>
          ) : (
            <Card key={keygen()} item={item} />
          )
        )}
    </div>
  );
};

Cards.propTypes = {
  module: PropTypes.shape({
    // eslint-disable-next-line react/forbid-prop-types
    items: PropTypes.arrayOf(PropTypes.object),
    featured_index: PropTypes.number,
    style: PropTypes.string,
  }).isRequired,
  page: PropTypes.shape({}),
};

export default Cards;
