text: import { useRef, useState } from "react";
  import { Card, Button, Form, Alert } from "react-bootstrap";
  import { useAuth } from "../../context/AuthContext";
  import { Link, useNavigate } from "react-router-dom";
  import "./Login.css";
  
  function Login() {
    const emailRef = useRef();
    const passwordRef = useRef();
    const { login } = useAuth();
    const [error, setError] = useState("");
    const [loading, setLoading] = useState(false);
    const navigate = useNavigate();
  
    async function handleSubmit(e) {
      e.preventDefault();
  
      try {
        setError("");
        setLoading(true);
        await login(emailRef.current.value, passwordRef.current.value);
        navigate("/");
      } catch {
        setError("Failed to log in");
      }
  
      setLoading(false);
    }
  
    return (
      <div className="login mt-4">
        <Card>
          <Card.Body>
            <h2 className="text-center mb-4">Log in</h2>
            {error && <Alert variant="danger">{error}</Alert>}
            <Form onSubmit={handleSubmit}>
              <Form.Group id="email">
                <Form.Label>Email</Form.Label>
                <Form.Control type="email" ref={emailRef} required />
              </Form.Group>
              <Form.Group id="password" className="mt-2">
                <Form.Label>Password</Form.Label>
                <Form.Control type="password" ref={passwordRef} required />
              </Form.Group>
  
              <Button disabled={loading} className="w-100 mt-2" type="submit">
                Log in
              </Button>
            </Form>
          </Card.Body>
        </Card>
        <div className="w-100 text-center mt-2" variant="danger">
          <p>Create an account</p>
          <Link to="/signup">Click here!</Link>
        </div>
      </div>
    );
  }
  
  export default Login;
  