/**
 * @module layouts/ZeroResults
 */
import { useEffect } from 'react';
import Grid from 'components/common/Grid';
import Text from 'components/Text';
import MapArray from 'components/common/MapArray';
import ProductCard from 'components/Cards/Product';
import useTranslations from 'helpers/useTranslations';
import { useItems } from '@findify/react-connect';
import styles from 'layouts/ZeroResults/styles.css';
export default ({ q, theme = styles }) => {
    const { items, config } = useItems();
    const translate = useTranslations();
    useEffect(() => {
        const spinner = document.querySelector('.findify-component-spinner');
        if (spinner && !spinner.hidden) {
            spinner.hidden = true;
        }
    }, []);
    return (<div className={theme.container}>
      <div className={theme.wrapper}>
        <div className={theme.sorryContainer}>
          <Text style={{ marginTop: 20 }} primary html={translate(q
        ? 'zeroresults.noResultsFound'
        : 'zeroresults.noResultEmptyQuery', escape(q))}/>
        </div>
        <div className={theme.recommendationContainer}>
          <Text className={theme.recommendation} primary inlineBlock>
            {translate('zeroresults.checkOutPopularProducts')}
          </Text>
        </div>
      </div>
      <Grid role="main" wrapperComponent="ul" columnComponent="li" gutter={12} columns={config.getIn(['breakpoints', 'grid'])}>
        {MapArray({
        array: items,
        factory: ProductCard,
        config: config.get('product'),
    })}
      </Grid>
    </div>);
};