import React, { useState } from 'react';
import Lottie from 'react-lottie';

import checkAnimation from '../../assets/lottie/check.json';
import NewsletterForm from '../shared/NewsletterForm';
import { NewsletterBannerContainer } from '../../styles/components/blog/NewsletterBanner.style';
import HenryRocket from '../../assets/img/henry-rocket.svg';

const NewsletterBanner: React.FC = () => {
  const [sendSuccess, setSendSuccess] = useState<boolean>(false);

  return (
    <NewsletterBannerContainer>
      <div>
        <h3>Recevez nos dernières publications avec la newsletter Easyblue !</h3>
        {sendSuccess ?
          <div>
            <Lottie
              height={90}
              width={90}
              options={{
                loop: false,
                animationData: checkAnimation
              }} />
            <p>
              Vous êtes désormais abonné(e) à la newsletter Easyblue
            </p>
          </div>
          :
          <>
            <NewsletterForm onSubmit={() => setSendSuccess(true)} />
            <small>
              <strong>En cliquant sur « Je m’abonne »</strong>, j’accepte de recevoir les nouveautés et conseils de la part d'Easyblue.
            </small>
          </>
        }
      </div>
      <HenryRocket />
    </NewsletterBannerContainer>
  );
};

export default NewsletterBanner;