import React, { useEffect, useState } from 'react';
import styled from 'styled-components';
import { formatDateTime } from '../utils/dateUtils';

// 右上角时间容器样式，绝对定位
const TimeBox = styled.div`
  position: absolute;
  top: 1.2vw;
  right: 2vw;
  z-index: 10;
  color: #E6F2FF;
  font-size: 2vw;
  font-family: 'DingTalk JinBuTi', 'PingFang SC', 'Microsoft YaHei', Arial, sans-serif;
  letter-spacing: 1px;
  text-shadow: 0 2px 8px rgba(0,0,0,0.18);
`;

const RightTopTime: React.FC = () => {
  // 当前时间state
  const [now, setNow] = useState(() => formatDateTime(new Date()).slice(0, 16)); // 只保留到分钟

  useEffect(() => {
    // 每分钟更新时间
    const timer = setInterval(() => {
      setNow(formatDateTime(new Date()).slice(0, 16));
    }, 60000);
    // 首次挂载时立即更新时间
    setNow(formatDateTime(new Date()).slice(0, 16));
    return () => clearInterval(timer);
  }, []);

  return <TimeBox>{now}</TimeBox>;
};

export default RightTopTime; 