import { Form, Input, Button } from "antd";
import { motion } from "framer-motion";

export interface LoginFormData {
    username: string;
    password: string;
}

interface LoginFormProps {
    onSubmit: (data: LoginFormData) => void;
    isLoading: boolean;
}

export const LoginForm = ({ onSubmit, isLoading }: LoginFormProps) => {
    const [form] = Form.useForm<LoginFormData>();

    return (
        <motion.div
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
        >

            <Form
                form={form}
                size="large"
                layout="vertical"
                onFinish={onSubmit}
            >
                <Form.Item
                    label="用户名"
                    name="username"
                    rules={[
                        { required: true, message: "请输入用户名" },
                        { min: 2, message: "用户名至少需要2个字符" }
                    ]}
                >
                    <Input
                        placeholder="请输入用户名"
                        className="rounded-lg"
                    />
                </Form.Item>

                <Form.Item
                    label="密码"
                    name="password"
                    rules={[
                        { required: true, message: "请输入密码" }
                    ]}
                >
                    <Input.Password
                        placeholder="请输入密码"
                        className="rounded-lg"
                    />
                </Form.Item>

                <Form.Item>
                    <Button
                        type="primary"
                        htmlType="submit"
                        loading={isLoading}
                        className="w-full h-10 rounded-lg"
                    >
                        {isLoading ? "登录中..." : "登录"}
                    </Button>
                </Form.Item>
            </Form>
        </motion.div>
    );
};
