import React from 'react';
import { useNavigate, useLocation } from 'react-router-dom';
import './AnnouncementDetail.css';

const AnnouncementDetail = () => {
  const navigate = useNavigate();
const location = useLocation();
  const { state } = useLocation();
  const announcement = state?.announcement;
  const handleBack = () => {
    const fromTab = location.state?.fromTab; // 从跳转时传递的 state 中获取
    if (fromTab) {
    navigate(`/dashboard/${fromTab}`); // 明确返回对应标签页
    } else {
        navigate(-1); // 保底策略
    }
}
  
    

  if (!announcement) {
    return (
      <div className="announcement-container">
        <button className="back-button" onClick={() => navigate(-1)}>
          &larr; 返回公告区
        </button>
        <div className="error-message">公告加载失败，请返回重试</div>
      </div>
    );
  }

  return (
    <div className="announcement-container">
      <button className="back-button" onClick={handleBack}>
        &larr; 返回
      </button>

      <div className="announcement-detail">
        <div className="announcement-header">
          <h1>{announcement.title}</h1>
          <div className="announcement-meta">
            <span className="category-badge">{announcement.category}</span>
            <span>发布人：{announcement.author}</span>
            <span>发布日期：{announcement.date}</span>
          </div>
        </div>

        <div className="announcement-content">
          {announcement.content.split('\n').map((paragraph, i) => (
            <p key={i}>{paragraph}</p>
          ))}
        </div>
      </div>
    </div>
  );
};

export default AnnouncementDetail;