import React from "react";
import { ModalOverlayStyled, UserModalStyled, UserBtns } from "./UserModal.style";

import api from "../../services/api";
import { AuthContext } from "../../context/Auth/AuthContext";
import { Can } from "../Can";
import BtnComponent from "../Base/BTN/Btn";

import FormComponent from "../Base/Form/FormComponent";
import InputComponent from "../Base/Form/Input/InputComponent";

const style = {
  width: "100%",
  justifyContent: "flex-start",
  display: "flex",
  flexDirection: "column",
  alignItems: "center",
}

const UserModal = () => {
  return (
    <ModalOverlayStyled>
      <UserModalStyled>
        <div style={style}>
          <h1>Imagem</h1>
          <p>Desc</p>
        </div>
        <FormComponent method="get">
          <InputComponent id="nome" label="Nome" type="text" />
          <InputComponent id="email" label="E-mail" type="email" />
          <InputComponent id="password" label="Senha" type="password" />
          <UserBtns>
            <BtnComponent text="Cancelar" />
            <BtnComponent text="Salvar" />
          </UserBtns>
        </FormComponent>
      </UserModalStyled>
    </ModalOverlayStyled>
  );
};

export default UserModal;