import React from 'react'
import { CompletarCadastroButton } from '../TabPanels/UserPageTabs/PanelSolicitarContaProfessor.js'
import FormInput from "../FormInput.js"
import styled from 'styled-components'

export default function Error(props) {
    return (
        <StyledDiv contrast={props.contrast}>
            <h2 className="title">Ops! Não encontramos essa conta</h2>
            <p className="paragraph">{props.value}</p>
            <p className="paragraph">Verifique se o e-mail foi digitado corretamente ou se você utilizou algum outro e-mail.</p>
            <form onSubmit={(e) => props.onSubmit(e)}>
                <FormInput
                    contrast={props.contrast}
                    inputType={"text"}
                    name={"email"}
                    value={props.value}
                    placeholder={"E-mail"}
                    handleChange={e => props.handleChange(e)}
                    required={true}
                    error={props.error}
                />
                <div style={{ display: "flex", justifyContent: "center" }}>
                    <CompletarCadastroButton contrast={props.contrast} type="submit" >BUSCAR</CompletarCadastroButton>
                </div>
            </form>
        </StyledDiv>
    )
}


const StyledDiv = styled.div`
    overflow: hidden;
    display: inline-block;
    font-size: 14px;
    text-align: start;

    .paragraph{
        color: ${props => props.contrast === "" ? "" : "white"};
    }

    .title{
        color: ${props => props.contrast === "" ? "" : "white"};
        font-size: 32px;
        font-weight: 200; 
        margin-bottom: 20px;
        line-height : 30px;
    }
`