// src/views/Community/components/DynamicNewsDetail/RelatedStocksSection.js
// 相关股票列表区组件（纯内容，不含标题）

import React from 'react';
import { VStack } from '@chakra-ui/react';
import StockListItem from './StockListItem';

/**
 * 相关股票列表区组件（纯内容部分）
 * 只负责渲染详细的股票列表，精简模式由外层 CollapsibleSection 的 simpleContent 提供
 * @param {Object} props
 * @param {Array<Object>} props.stocks - 股票数组
 * @param {Object} props.quotes - 股票行情字典 { [stockCode]: { change: number } }
 * @param {string} props.eventTime - 事件时间
 * @param {Set} props.watchlistSet - 自选股代码集合
 * @param {Function} props.onWatchlistToggle - 切换自选股回调
 */
const RelatedStocksSection = ({
  stocks,
  quotes = {},
  eventTime = null,
  watchlistSet = new Set(),
  onWatchlistToggle
}) => {
  // 如果没有股票数据，不渲染
  if (!stocks || stocks.length === 0) {
    return null;
  }

  return (
    <VStack align="stretch" spacing={3}>
      {stocks.map((stock, index) => (
        <StockListItem
          key={index}
          stock={stock}
          quote={quotes[stock.stock_code]}
          eventTime={eventTime}
          isInWatchlist={watchlistSet.has(stock.stock_code)}
          onWatchlistToggle={onWatchlistToggle}
        />
      ))}
    </VStack>
  );
};

export default RelatedStocksSection;