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 = {
	onLogin: (email: string, password: string) => void;
	show: boolean;
};

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

	return (
		<Modal show={show}>
			<Modal.Header closeButton>
				<Modal.Title>Modal title</Modal.Title>
			</Modal.Header>

			<Modal.Body>
				<Form
					onSubmit={(e) => {
						e.preventDefault();
						onLogin(email, password);
					}}
				>
					<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>
					<Button variant="primary" type="submit">
						Login
					</Button>
				</Form>
			</Modal.Body>

			<Modal.Footer></Modal.Footer>
		</Modal>
	);
};
export default AuthModal;