
import React from 'react';
import PropTypes from 'prop-types';
import { createNamespace } from '../../../../../tools/namingTools';
import { i18nFooterNewsletterPropTypes } from '../../../../../constants/components/prop-types/footer';
import { FOOTER_NEWSLETTER_BUTTON_STYLE_OPTIONS } from '../../../../../constants/components/footer';
import ButtonIcon from '../../../../../atoms/button-icon/ButtonIcon';

import './styles/FooterNewsletter.scss';

const n = createNamespace('FooterNewsletter');

const FooterNewsletter = ({
    url,
    buttonTheme,
    i18n
}) => (
    <div {...n('wrapper').props}>
        {i18n.newsletterTitle && (
            <span {...n('title').props}>{i18n.newsletterTitle}</span>
        )}
        {i18n.newsletterDescription && (
            <p {...n('description').props}>{i18n.newsletterDescription}</p>
        )}
        {i18n.newsletterButton && (
            <div {...n('button').props}>
                <ButtonIcon
                    url={url}
                    theme={buttonTheme}
                >
                    {i18n.newsletterButton}
                </ButtonIcon>
            </div>
        )}
    </div>
);

FooterNewsletter.propTypes = {
    buttonTheme: PropTypes.oneOf(FOOTER_NEWSLETTER_BUTTON_STYLE_OPTIONS.map(({ value }) => value)),
    url: PropTypes.string,
    i18n: PropTypes.shape(i18nFooterNewsletterPropTypes)
};

FooterNewsletter.defaultProps = {
    buttonTheme: null,
    url: null,
    i18n: {
        newsletterTitle: '',
        newsletterDescription: '',
        newsletterButton: 'Subscribe'
    }
};

export default FooterNewsletter;
