import { Button, FloatButton, Form, Input } from "antd"
import { useNavigate } from "react-router-dom"
export default function Login() {
    const navigate = useNavigate()
    // 修正函数名拼写错误 (handeLogin → handleLogin)
    const handleLogin = () => {
        navigate("/path")
    }
    return (
        <div className="min-h-screen flex flex-col bg-slate-900"> 
            <FloatButton></FloatButton>
            <div className="bg-gradient-to-r from-sky-500 to-cyan-600 w-full"> 
                <div className="mx-auto px-4 max-w-3xl rounded-b-xl shadow-lg shadow-cyan-500/20"> 
                    <h1 className="text-center text-2xl md:text-3xl font-bold p-4 md:p-6 bg-gradient-to-r from-sky-400 to-cyan-400 bg-clip-text text-transparent">
                        系统登录
                    </h1>
                </div>
                
            </div>


            <div className="flex-1 ">
                {/* 添加响应式边距和最大宽度 */}
                <div className="relative mx-4 md:mx-[50vh] mt-16 md:mt-[20vh] max-w-[90%] md:max-w-full bg-gray-800 rounded-xl shadow-[0_0_30px_rgba(14,165,235,0.2)] border border-sky-400/50 py-6">
                    <Form
                        className="space-y-6 px-4"
                        onFinish={handleLogin}
                        layout="vertical"
                    >
                        {/* 添加响应式字体大小 */}
                        <h2 className="text-transparent bg-clip-text bg-gradient-to-r from-sky-400 to-cyan-300 text-xl md:text-3xl font-bold text-center mb-8">
                            请登录
                        </h2>

                        <div className="space-y-8 flex-1">
                            <Form.Item
                                label="用户名"
                                name="username"
                                className="font-bold text-lg text-sky-200"  
                                labelCol={{ style: { color: '#bae6fd' } }}  
                            >
                                <Input
                                    className="w-full bg-gray-700/50 border-sky-400 hover:border-sky-300 focus:border-sky-500 rounded-lg text-gray-100 placeholder-gray-400 h-12 text-lg px-4"  // 移除max-width限制
                                />
                            </Form.Item>

                            <Form.Item
                                label="密码"
                                name="password"
                                className="font-bold text-lg text-sky-200" 
                                labelCol={{ style: { color: '#bae6fd' } }}  
                            >
                                <Input.Password
                                    className="w-full bg-gray-700/50 border-sky-400 hover:border-sky-300 focus:border-sky-500 rounded-lg [&>input]:text-gray-100 h-12 text-lg px-4"  // 移除max-width限制
                                />
                            </Form.Item>
                        </div>

                        <div className="flex justify-center mt-8">
                            <Button
                                type="primary"
                                htmlType="submit"
                                className="w-full md:w-2/3 bg-gradient-to-r from-sky-400 to-cyan-400 hover:from-sky-500 hover:to-cyan-500 h-12 text-lg font-bold rounded-xl transition-all duration-300 shadow-lg shadow-sky-500/20"
                            >
                                登录
                            </Button>
                        </div>
                    </Form>

                </div>
            </div>
        </div>
    )
}