import React from 'react';
import { useNavigate, useLocation } from 'react-router-dom';
import ActionCard from './ActionCard';
import './personalSubpage.css';

const Favorites = () => {
  const navigate = useNavigate();
  const location = useLocation();
  // 模拟数据
  const [favorites] = React.useState([
    { id: 1, name: '盗梦空间', type: 'movie', added: '2023-10-01' },
    { id: 2, name: '权力的游戏', type: 'tv', added: '2023-09-15' }
  ]);

  const handleBack = () => {
    // 返回个人中心，并携带来源标记
    navigate('/personal', { 
      state: { 
        fromSubpage: true,  // 标记来自子页面
        dashboardTab: location.state?.dashboardTab // 保留Dashboard的标签页状态
      },
      replace: true  // 替换当前历史记录
    });
  };

  return (
    <div className="personal-page">
      <button className="back-button" onClick={(handleBack)}>
        &larr; 返回个人中心
      </button>

      <h2>我的收藏</h2>
      <div className="resource-grid">
        {favorites.map(item => (
          <ActionCard 
            key={item.id}
            title={item.name}
            subtitle={`收藏于 ${item.added}`}
            onClick={() => console.log('查看详情', item.id)}
          />
        ))}
      </div>
    </div>
  );
};

export default Favorites;