import React from 'react';
import { useQuery } from '@tanstack/react-query';
import { motion } from 'framer-motion';
import { CalendarOutlined } from '@ant-design/icons';
import ActivityList from '../components/activity/ActivityList';
import { fadeInUp, staggerContainer } from '../animation';

const Activities = () => {
  return (
    <motion.div
      initial="hidden"
      animate="visible"
      variants={staggerContainer}
    >
      <motion.div variants={fadeInUp}>
        <h1 style={{ 
          fontSize: '32px', 
          marginBottom: '30px', 
          color: '#fff',
          display: 'flex',
          alignItems: 'center',
          gap: '12px'
        }}>
          <CalendarOutlined style={{ color: '#1890ff' }} />
          系列活动
        </h1>
      </motion.div>
      
      <ActivityList />
    </motion.div>
  );
};

export default Activities;