text: import React from 'react';
  import { Link } from 'react-router-dom';
  import { Form, Input } from '@rocketseat/unform';
  import * as Yup from 'yup';
  import { useDispatch, useSelector } from 'react-redux';
  import Lottie from 'react-lottie';
  
  import { signInRequest } from '~/store/modules/auth/actions';
  
  import logo from '~/assets/logo.svg';
  import loader from '~/assets/loader1.json';
  
  const schema = Yup.object().shape({
    email: Yup.string().required('O e-mail é obrigatório'),
    password: Yup.string().required('A senha é obrigatória'),
  });
  
  export default function SignIn() {
    const dispatch = useDispatch();
    const loading = useSelector(state => state.auth.loading);
  
    function handleSubmit({ email, password }) {
      dispatch(signInRequest(email, password));
    }
  
    const defaultOptions = {
      loop: true,
      autoplay: true,
      animationData: loader,
      rendererSettings: {
        preserveAspectRatio: 'xMidYMid slice',
      },
    };
  
    return (
      <>
        <img src={logo} alt="GoBarber" />
  
        <Form schema={schema} onSubmit={handleSubmit}>
          <Input name="email" type="email" placeholder="Seu e-mail" />
          <Input
            name="password"
            type="password"
            placeholder="Sua senha secreta"
          />
  
          <button type="submit">
            {loading ? (
              <Lottie options={defaultOptions} height={20} width={100} />
            ) : (
              'Acessar'
            )}
          </button>
          <Link to="/register">Criar conta gratuita</Link>
        </Form>
      </>
    );
  }
  