/**
 * @module layouts/Recommendation/Grid
 */
import Grid from 'components/common/Grid';
import Text from 'components/Text';
import Product from 'components/Cards/Product';
import MapArray from 'components/common/MapArray';
import styles from 'layouts/Recommendation/Grid/styles.css';
import { useItems } from '@findify/react-connect';
export default ({ theme = styles }) => {
    const { items, config } = useItems();
    if (!items?.size)
        return null;
    return (<>
      <Text title component="p" className={theme.title}>
        {config.get('title')}
      </Text>
      <Grid gutter={20} columns={config.getIn(['breakpoints', 'grid'])}>
        {MapArray({
        config: config.get('product'),
        array: items,
        factory: Product,
    })}
      </Grid>
    </>);
};