import React from "react";
import PropTypes from "prop-types";
import { Card } from "@mui/material";
import styles from "../styles";
import LoginComponent from "./LoginComponent";

const LoginCard = ({ credentials, onChange, onLogin }) => {
  return (
    <div style={styles.appLogin}>
      <Card variant="outlined">
        <LoginComponent credentials={credentials} onChange={onChange} onLogin={onLogin} />
      </Card>
    </div>
  );
};

LoginCard.propTypes = {
  credentials: PropTypes.object.isRequired,
  onChange: PropTypes.func.isRequired,
  onLogin: PropTypes.func.isRequired
};

export default LoginCard;
