import React from 'react';
import { useNavigate,useLocation } from 'react-router-dom';
import './personalSubpage.css';

const Notice = ({ onLogout }) => {
  const navigate = useNavigate();
  const location = useLocation();
  // 模拟数据
  const [notices] = React.useState([
    { 
      id: 1, 
      title: '积分奖励到账', 
      content: '您上传的资源《盗梦空间》获得100积分奖励',
      date: '2023-10-20',
      read: false
    },
    { 
      id: 2, 
      title: '系统通知', 
      content: '服务器将于今晚2:00-4:00进行维护',
      date: '2023-10-18',
      read: true
    }
  ]);

  const handleBack = () => {
    // 返回个人中心，并携带来源标记
    navigate('/personal', { 
      state: { 
        fromSubpage: true,  // 标记来自子页面
        dashboardTab: location.state?.dashboardTab // 保留Dashboard的标签页状态
      },
      replace: true  // 替换当前历史记录
    });
  };

  return (
    <div className="subpage-container">
      <button className="back-button" onClick={(handleBack)}>
        ← 返回个人中心
      </button>

      <h2 className="page-title">消息通知</h2>
      
      <div className="notice-list">
        {notices.map(notice => (
          <div key={notice.id} className={`list-item ${!notice.read ? 'unread' : ''}`}>
            <div className="notice-header">
              <h3>{notice.title}</h3>
              <span className="notice-date">{notice.date}</span>
            </div>
            <p className="notice-content">{notice.content}</p>
          </div>
        ))}
      </div>
    </div>
  );
};

export default Notice;