import Button from "react-bootstrap/Button"
import Form from "react-bootstrap/Form"
import Modal from "react-bootstrap/Modal"

import React, {useState} from "react"

type AuthProps = {
  doLogin: (email: string, password: string) => void;
}

const AuthModal: React.FC<AuthProps> = ({ doLogin }) => {
	const [email, setEmail] = useState("");
	const [password, setPassword] = useState("");

	return (
		<div
			className="modal show"
			style={{ display: "block", position: "initial" }}
		>
			<Modal.Dialog>
				<Modal.Header closeButton>
					<Modal.Title>Modal title</Modal.Title>
				</Modal.Header>

				<Modal.Body>
					<Form>
						<Form.Group className="mb-3" controlId="formBasicEmail">
							<Form.Label>Email address</Form.Label>
							<Form.Control type="email" placeholder="Enter email" onChange={e => setEmail(e.target.value)}/>
							<Form.Text className="text-muted">
								We'll never share your email with anyone else.
							</Form.Text>
						</Form.Group>

						<Form.Group className="mb-3" controlId="formBasicPassword">
							<Form.Label>Password</Form.Label>
							<Form.Control type="password" placeholder="Password" onChange={e => setPassword(e.target.value)}/>
						</Form.Group>
					</Form>
				</Modal.Body>

				<Modal.Footer>
					<Button variant="primary" onClick={() => {doLogin(email, password)}}>Login</Button>
				</Modal.Footer>
			</Modal.Dialog>
		</div>
	);
}
export default AuthModal;