import { Form, Input, Button, Row, Col, Typography, Image, Space } from "antd";
import useLoginPage from "./useLoginPage.js";

const { Title } = Typography;

const LoginPage = () => {
    const {
        containerStyle,
        formContainerStyle,
        titleStyle,
        logoBlockStyle,
        logoStyle,
        appNameStyle,
        labels,
        isLoading,
        onFinish,
    } = useLoginPage();

    return (
        <Row justify="center" align="middle" style={containerStyle}>
            <Col xs={24} sm={18} md={12} lg={8} xl={6}>
                <Space direction="horizontal" style={logoBlockStyle} size="large">
                    <Image
                        src="/logo_rounded.png"
                        style={logoStyle}
                        preview={false}
                        alt="Visus API Logo"
                    />
                    <Title level={1} style={appNameStyle}>
                        Visus+
                    </Title>
                </Space>
                <div style={formContainerStyle}>
                    <Title level={2} style={titleStyle}>
                        {labels.title}
                    </Title>

                    <Form name="login" initialValues={{ remember: true }} onFinish={onFinish}>
                        <Form.Item
                            name="login"
                            rules={[{ required: true, message: labels.loginRequired }]}
                        >
                            <Input placeholder={labels.loginPlaceholder} />
                        </Form.Item>

                        <Form.Item
                            name="password"
                            rules={[{ required: true, message: labels.passwordRequired }]}
                        >
                            <Input.Password placeholder={labels.passwordPlaceholder} />
                        </Form.Item>

                        <Form.Item>
                            <Button type="primary" htmlType="submit" block loading={isLoading}>
                                {labels.submitButton}
                            </Button>
                        </Form.Item>
                    </Form>
                </div>
            </Col>
        </Row>
    );
};

export default LoginPage;