import { useEffect, useState } from "react";

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

    useEffect(() => {
        // setInterval是 JavaScript 中的一个全局函数，用于重复执行代码
        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')" }} 
        >
            {/* 时间显示  只显示日期: "2025/3/15"*/}
            <div className="absolute top-4 right-4 mr-40">
                <div>
                    {currentTime.toLocaleDateString('zh-CN')} 
                </div>
            </div>
            <div className="absolute top-4 right-4 mr-20"> 
                <h2 className="text-lg font-bold cursor-pointer" 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>
    )
}