// src/views/Community/components/DynamicNewsDetail/RelatedStocksSection.js
// 相关股票列表区组件（可折叠，网格布局）

import React from 'react';
import {
  Box,
  SimpleGrid,
  Collapse,
} from '@chakra-ui/react';
import CollapsibleHeader from './CollapsibleHeader';
import StockListItem from './StockListItem';

/**
 * 相关股票列表区组件
 * @param {Object} props
 * @param {Array<Object>} props.stocks - 股票数组
 * @param {Object} props.quotes - 股票行情字典 { [stockCode]: { change: number } }
 * @param {string} props.eventTime - 事件时间
 * @param {Set} props.watchlistSet - 自选股代码集合
 * @param {boolean} props.isOpen - 是否展开
 * @param {Function} props.onToggle - 切换展开/收起的回调
 * @param {Function} props.onWatchlistToggle - 切换自选股回调
 */
const RelatedStocksSection = ({
  stocks,
  quotes = {},
  eventTime = null,
  watchlistSet = new Set(),
  isOpen,
  onToggle,
  onWatchlistToggle
}) => {
  // 如果没有股票数据，不渲染
  if (!stocks || stocks.length === 0) {
    return null;
  }

  return (
    <Box>
      <CollapsibleHeader
        title="相关股票"
        isOpen={isOpen}
        onToggle={onToggle}
        count={stocks.length}
      />
      <Collapse in={isOpen} animateOpacity>
        <Box mt={3}>
          <SimpleGrid columns={{ base: 1, md: 2, lg: 3 }} spacing={4}>
            {stocks.map((stock, index) => (
              <StockListItem
                key={index}
                stock={stock}
                quote={quotes[stock.stock_code]}
                eventTime={eventTime}
                isInWatchlist={watchlistSet.has(stock.stock_code)}
                onWatchlistToggle={onWatchlistToggle}
              />
            ))}
          </SimpleGrid>
        </Box>
      </Collapse>
    </Box>
  );
};

export default RelatedStocksSection;