import React from "react";
import { Col, Container, Form, Row } from "react-bootstrap";
import MyNavbar from "../components/MyNavbar";

const LoginPage = () => {
  return (
    <React.Fragment>
      <MyNavbar />
      <Container className="p-5">
        <Form>
          <Form.Group as={Row} className="mb-3" controlId="username">
            <Form.Label column sm={2}>
              Username
            </Form.Label>
            <Col sm={10}>
              <Form.Control type="username" placeholder="username" />
            </Col>
          </Form.Group>
          <Form.Group as={Row} className="mb-3" controlId="password">
            <Form.Label column sm={2}>
              Password
            </Form.Label>
            <Col sm={10}>
              <Form.Control type="password" placeholder="password" />
            </Col>
          </Form.Group>
          <Form.Group as={Row}>
            <p>
              Don't have an account? <a href="/register">Register here</a>
            </p>
          </Form.Group>
        </Form>
      </Container>
    </React.Fragment>
  );
};

export default LoginPage;