import React from 'react';
import { createNamespace } from '../../../../../tools/namingTools';
import { footerNewsletterPropTypes } from '../../../../../constants/components/prop-types/footer';
import { footerNewsLetterDefaultProps } from '../../../../../constants/components/schemas/footer';
import ButtonIcon from '../../../../../atoms/button-icon/ButtonIcon';

import './styles/FooterNewsletter.scss';

const n = createNamespace('FooterNewsletter');

const FooterNewsletter = ({
    url,
    buttonTheme,
    i18n
}) => {
    const { newsletterTitle, newsletterDescription, newsletterButtonLabel } = i18n;

    return (
        <div {...n('wrapper').withE2EId().props}>
            {newsletterTitle && (
                <span {...n('title').withE2EId().props}>{newsletterTitle}</span>
            )}
            {newsletterDescription && (
                <p {...n('description').withE2EId().props}>{newsletterDescription}</p>
            )}
            {newsletterButtonLabel && (
                <div {...n('button').withE2EId().props}>
                    <ButtonIcon
                        url={url}
                        theme={buttonTheme}
                    >
                        {newsletterButtonLabel}
                    </ButtonIcon>
                </div>
            )}
        </div>
    );
};

FooterNewsletter.propTypes = footerNewsletterPropTypes;

FooterNewsletter.defaultProps = footerNewsLetterDefaultProps;

export default FooterNewsletter;
