// src/views/Community/components/EventListSection.js
// 事件列表区域组件（包含Loading、Empty、List三种状态）

import React from 'react';
import {
  Box,
  Center,
  VStack,
  Spinner,
  Text
} from '@chakra-ui/react';
import EventList from './EventList';

/**
 * 事件列表区域组件
 * @param {boolean} loading - 加载状态
 * @param {Array} events - 事件列表
 * @param {Object} pagination - 分页信息
 * @param {Function} onPageChange - 分页变化回调
 * @param {Function} onEventClick - 事件点击回调
 * @param {Function} onViewDetail - 查看详情回调
 */
const EventListSection = ({
  loading,
  events,
  pagination,
  onPageChange,
  onEventClick,
  onViewDetail
}) => {
  // ✅ 最小高度，避免加载后高度突变
  const minHeight = '600px';

  // Loading 状态
  if (loading) {
    return (
      <Box minH={minHeight}>
        <Center py={10}>
          <VStack>
            <Spinner size="xl" color="blue.500" thickness="4px" />
            <Text color="gray.500">正在加载最新事件...</Text>
          </VStack>
        </Center>
      </Box>
    );
  }

  // Empty 状态
  if (!events || events.length === 0) {
    return (
      <Box minH={minHeight}>
        <Center py={10}>
          <VStack>
            <Text fontSize="lg" color="gray.500">暂无事件数据</Text>
          </VStack>
        </Center>
      </Box>
    );
  }

  // List 状态
  return (
    <Box minH={minHeight}>
      <EventList
        events={events}
        pagination={pagination}
        onPageChange={onPageChange}
        onEventClick={onEventClick}
        onViewDetail={onViewDetail}
      />
    </Box>
  );
};

export default EventListSection;