import { useEffect, useState } from "react";

export function Header(){
    const [currentTime, setCurrentTime] = useState(new Date());

    useEffect(() => {
        const timer = setInterval(() => {
            setCurrentTime(new Date());
        }, 1000); // 每秒更新一次

        // 清理定时器
        return () => clearInterval(timer);
    }, []);

    return (
        <div 
            className="relative w-[1280px] h-[704px] bg-cover bg-center left-1/2 transform -translate-x-1/2"
            style={{ backgroundImage: "url('/app/images/header.png')" }} 
        >
            {/* 时间显示 */}
            <div className="absolute top-4 right-4 mr-40">
                <div>
                    {currentTime.toLocaleString('zh-CN')}
                </div>
            </div>
            <div className="absolute top-4 right-4 mr-20 cursor-pointer"> 
                <h2 className="text-lg font-bold" onClick={() => console.log('登录')}>登录</h2>
            </div>
            <div className="absolute top-4 right-4 mr-5"> 
                <h2 className="text-lg font-bold cursor-pointer" onClick={() => console.log('注册')}>注册</h2>
            </div>
        </div>
    )
}