
import React from 'react';
import { motion } from 'framer-motion';
import { CalendarOutlined, RightOutlined } from '@ant-design/icons';
import { useNavigate } from 'react-router-dom';
import styles from './activity.module.less';
import { hoverScale, imageFadeIn } from '../../animation';

const ActivityCard = ({ activity, index }) => {
  const navigate = useNavigate();

  const handleCardClick = () => {
    navigate(`/activity/${activity.id}`);
  };

  const getStatus = (startTime) => {
    const now = new Date();
    const start = new Date(startTime);
    if (now < start) return '即将开始';
    // Simple logic, can be enhanced
    return '报名中';
  };

  const formatDate = (dateStr) => {
    if (!dateStr) return 'TBD';
    const date = new Date(dateStr);
    return date.toLocaleDateString('zh-CN', { month: 'long', day: 'numeric' });
  };

  return (
    <motion.div
      className={styles.activityCard}
      variants={hoverScale}
      whileHover="hover"
      onClick={handleCardClick}
      layoutId={`activity-card-${activity.id}`}
      style={{ willChange: 'transform' }}
    >
      <div className={styles.imageContainer}>
        <motion.img
          src={activity.display_banner_url || activity.banner_url || activity.cover_image || 'https://via.placeholder.com/600x400'}
          alt={activity.title}
          variants={imageFadeIn}
          initial="hidden"
          whileInView="visible"
          viewport={{ once: true }}
          loading="lazy"
        />
        <div className={styles.overlay}>
          <div className={styles.statusTag}>
            {activity.status || getStatus(activity.start_time)}
          </div>
          <h3 className={styles.title}>{activity.title}</h3>
          <div className={styles.time}>
            <CalendarOutlined />
            <span>{formatDate(activity.start_time)}</span>
          </div>
        </div>
      </div>
    </motion.div>
  );
};

export default ActivityCard;
