import React from 'react';
import { Form, Input, Button, Checkbox, Row, Col } from 'antd';
import { UserOutlined, LockOutlined } from '@ant-design/icons';
import {HeartOutlined} from '@ant-design/icons';

const LoginForm = ({onFinish},) => {

  return (
    <Form name="normal_login" className="login-form" initialValues={{remember: true, }} onFinish={onFinish}>
        <Row justify="center" style={{marginTop:'80px'}}>
        <HeartOutlined />
        </Row>

        <Row justify="center" style={{marginTop:'20px'}}>
        <Col>
        <Form.Item name="userid" rules={[{required: true, message: 'id를 입력해주세요.', },]}>
            <Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="User id" />
        </Form.Item>
        </Col>
        </Row> 

        <Row justify="center" style={{marginTop:'10px'}}>
        <Col>
        <Form.Item name="userpwd" rules={[{required: true, message: '비밀번호를 입력해주세요.'},]}>
            <Input prefix={<LockOutlined className="site-form-item-icon" />} type="password" placeholder="Password"/>
        </Form.Item>
        </Col>
        </Row>

        <Row justify="center" style={{marginTop:'10px'}}>
        <Col>
        <Form.Item name="remember" valuePropName="checked" noStyle>
            <Checkbox>Remember me</Checkbox>
        </Form.Item>  
        </Col>
        </Row>

        <Row justify="center" style={{marginTop:'10px'}}>
        <Col>
        <Form.Item>
            <Button type="primary" htmlType="submit" className="login-form-button">
                로그인하기
            </Button>
        </Form.Item>
        </Col>
        </Row>
        
    </Form>
  );
}

export default LoginForm;