import React from 'react';
import { createNamespace } from '../../../../../tools/namingTools';
import { generateUniqueID } from '../../../../../tools/helpers';
import { footerFeaturesPropTypes } from '../../../../../constants/components/prop-types/footer';
import Image from '../../../../../atoms/image/Image';

import './styles/FooterFeatures.scss';

const n = createNamespace('FooterFeatures');

const FEATURES_MAX_LENGTH = 4;

const FooterFeatures = ({ items }) => {
    const featureList = items;

    if (!featureList || !featureList.length) {
        return null;
    }

    if (featureList.length > FEATURES_MAX_LENGTH) {
        featureList.length = FEATURES_MAX_LENGTH;
    }

    const renderFeatureItem = ({ title, text, link, icon }) => {
        const itemModifers = `col-${featureList.length === FEATURES_MAX_LENGTH ? '3' : '4'}`;

        return (
            <div {...n('item', itemModifers).props} key={generateUniqueID([title, text])}>
                <div {...n('card').props}>
                    {icon && (
                        <Image src={icon} alt={title} className={n('image').props.className} />
                    )}
                    <div {...n('content').props}>
                        <span {...n('title').props}>{title}</span>
                        <p {...n('description').props}>{text}</p>
                    </div>
                    {link && (
                        <a {...n('overlay').props} href={link}><span {...n('overlayTitle').props}>{title}</span></a>
                    )}
                </div>
            </div>
        );
    };

    return (
        <div {...n('wrapper').props}>
            {featureList.map(renderFeatureItem)}
        </div>
    );
};

FooterFeatures.propTypes = footerFeaturesPropTypes;

FooterFeatures.defaultProps = {
    items: null
};

export default FooterFeatures;
