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

import { Card } from '../../styles/components/blog/NewsletterCard.style';
import checkAnimation from '../../assets/lottie/check.json';
import NewsletterForm from '../shared/NewsletterForm';

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

  return (
    <Card>
      {sendSuccess ?
        <div>
          <Lottie
            height={100}
            width={100}
            options={{
              loop: false,
              animationData: checkAnimation
            }} />
          <p>
            Vous êtes désormais abonné(e)<br />
            à la newsletter Easyblue
          </p>
        </div>
        :
        <>
          <h3>Soyez les premiers informés avec la newsletter Easyblog !</h3>
          <p> Recevez tous les mois un condensé de nos dernières publications !</p>
          <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>
        </>
      }
    </Card>
  );
};

export default NewsletterCard;