// src/views/Community/components/HotEventsSection.js
// 热点事件区域组件

import React, { useState } from 'react';
import {
  Card,
  CardHeader,
  CardBody,
  Heading,
  Badge,
  Box,
  useColorModeValue
} from '@chakra-ui/react';
import HotEvents from './HotEvents';

/**
 * 热点事件区域组件
 * @param {Array} events - 热点事件列表
 */
const HotEventsSection = ({ events }) => {
  const cardBg = useColorModeValue('white', 'gray.800');
  const [currentPage, setCurrentPage] = useState(1);
  const [totalPages, setTotalPages] = useState(1);

  // 处理页码变化
  const handlePageChange = (page, total) => {
    setCurrentPage(page);
    setTotalPages(total);
  };

  // 如果没有热点事件，不渲染组件
  if (!events || events.length === 0) {
    return null;
  }

  return (
    <Card mt={0} bg={cardBg}>
      <CardHeader pb={0} display="flex" justifyContent="space-between" alignItems="flex-start">
        <Box>
          <Heading size="md">🔥 热点事件</Heading>
          <p className="section-subtitle" style={{paddingTop: '8px'}}>展示最近5天内涨幅最高的事件，助您把握市场热点</p>
        </Box>
        {/* 页码指示器 */}
        {totalPages > 1 && (
          <Badge
            colorScheme="blue"
            fontSize="sm"
            px={3}
            py={1}
            borderRadius="full"
            ml={4}
          >
            {currentPage} / {totalPages}
          </Badge>
        )}
      </CardHeader>
      <CardBody py={0} px={4}>
        <HotEvents events={events} onPageChange={handlePageChange} />
      </CardBody>
    </Card>
  );
};

export default HotEventsSection;