import React, { useState } from "react";
import styled from "styled-components";
import Input from "../Components/Input";
import Button from "../Components/Button";

const Wrapper = styled.div``;

const Box = styled.div``;

const StateChanger = styled(Box)``;

const Link = styled.span``;

const Form = styled(Box)``;

export default () => {
  const [action, setAction] = useState("logIn");

  return (
    <Wrapper>
      <Form>
        {action === "logIn" ? (
          <form>
            <Input placeholder={"Email"} type="email" />
            <Input placeholder={"Password"} type="password" />
            <Button text={"Log In"} />
          </form>
        ) : (
          <form>
            <Input placeholder={"Email"} type="email" />
            <Input placeholder={"Password"} type="password" />
            <Input placeholder={"Password for validation"} type="password" />
            <Input placeholder={"UserName"} />
            <Button text={"Sign Up"} />
          </form>
        )}
      </Form>
      <StateChanger>
        {action === "logIn" ? (
          <>
            Don't you have an account ?
            <Link onClick={() => setAction("signUp")}> </Link>
          </>
        ) : (
          <>
            Did you have an account ?
            <Link onClick={() => setAction("logIn")}> </Link>
          </>
        )}
      </StateChanger>
    </Wrapper>
  );
};