/* eslint-disable arrow-body-style */
import React from 'react';
import PropTypes from 'prop-types';
import loadable from '@loadable/component';
import Card from '~atoms/cards/default-card';
import { translate } from '~helpers/getters';

const SearchContent = ({ page }) => {
  const Search = loadable(() => import('~molecules/search'));
  const searchURLPageName = page.path;
  return (
    <Search
      searchURLPageName={searchURLPageName}
      page={page}
      pageSearchOptions={{
        useArchive: true,
        archiveOptions: {
          titles: [
            { type: 'operator', title: translate(page?.translations, 'casino', 'Casino') },
            { type: 'article', title: translate(page?.translations, 'news', 'News') },
            { type: 'games', title: translate(page?.translations, 'games', 'Games') },
            { type: 'page', title: translate(page?.translations, 'default', 'Default') },
          ],
          includeOptions: {
            desktop_num_of_columns: '3',
            mobile_num_of_columns: '1',
            tablet_num_of_columns: '3',
          },
        },
        tabs: true,
        tabsOptions: { showAll: 'ShowAll', tabsAlign: 'left' },
        sort: [{ name: 'Sorting', field: 'id', type: 'number' }],
        loadMore: {
          label: translate(page?.translations, 'show_more', 'Show more'),
          limit: 3,
          increment: 6,
          usePrimaryButton: false,
          useInvertColors: true,
        },
      }}
    >
      {(item) => (
        <>
          <div type="operator">
            <Card item={item} />
          </div>
          <div type="games">
            <Card item={item} />
          </div>
          <div type="article">
            <Card item={item} />
          </div>
          <div type="page">
            <Card item={item} />
          </div>
        </>
      )}
    </Search>
  );
};

SearchContent.propTypes = {
  page: PropTypes.shape({
    template: PropTypes.string,
    path: PropTypes.string,
    updated_at: PropTypes.string,
    created_at: PropTypes.string,
    author: PropTypes.shape({
      name: PropTypes.string,
    }),
    translations: PropTypes.shape({}),
  }),
};

export default SearchContent;
