import { useRef } from 'react';
import { Button } from 'antd';
import { RightOutlined } from '@ant-design/icons';
import './Festival.css';

const Festival = () => {
  const scrollRef = useRef(null);

  const festivals = [
    { name: '惊蛰', date: '2026-03-05', weekday: '周四', daysLeft: 6, emoji: '⚡' },
    { name: '植树节', date: '2026-03-12', weekday: '周四', daysLeft: 13, emoji: '🌳' },
    { name: '春分', date: '2026-03-20', weekday: '周五', daysLeft: 21, emoji: '🌸' },
    { name: '愚人节', date: '2026-04-01', weekday: '周三', daysLeft: 33, emoji: '🤡' },
    { name: '清明节', date: '2026-04-05', weekday: '周日', daysLeft: 37, emoji: '🌿' },
    { name: '谷雨', date: '2026-04-20', weekday: '周一', daysLeft: 52, emoji: '🌾' },
    { name: '劳动节', date: '2026-05-01', weekday: '周五', daysLeft: 63, emoji: '🎉' },
    { name: '青年节', date: '2026-05-04', weekday: '周一', daysLeft: 66, emoji: '🔥' },
    { name: '立夏', date: '2026-05-05', weekday: '周二', daysLeft: 67, emoji: '☀️' },
    { name: '母亲节', date: '2026-05-10', weekday: '周日', daysLeft: 72, emoji: '💐' },
    { name: '小满', date: '2026-05-21', weekday: '周四', daysLeft: 83, emoji: '🌾' },
    { name: '端午节', date: '2026-06-19', weekday: '周五', daysLeft: 112, emoji: '🛶' },
    { name: '夏至', date: '2026-06-21', weekday: '周日', daysLeft: 114, emoji: '🌻' },
    { name: '建党节', date: '2026-07-01', weekday: '周三', daysLeft: 124, emoji: '🚩' },
    { name: '小暑', date: '2026-07-07', weekday: '周二', daysLeft: 130, emoji: '🔥' },
    { name: '建军节', date: '2026-08-01', weekday: '周六', daysLeft: 155, emoji: '🎖️' },
    { name: '立秋', date: '2026-08-07', weekday: '周五', daysLeft: 161, emoji: '🍂' },
    { name: '七夕节', date: '2026-08-25', weekday: '周二', daysLeft: 179, emoji: '💕' },
    { name: '白露', date: '2026-09-07', weekday: '周一', daysLeft: 192, emoji: '💧' },
    { name: '教师节', date: '2026-09-10', weekday: '周四', daysLeft: 195, emoji: '📚' },
    { name: '秋分', date: '2026-09-23', weekday: '周三', daysLeft: 208, emoji: '🍁' },
    { name: '国庆节', date: '2026-10-01', weekday: '周四', daysLeft: 216, emoji: '🇨🇳' },
    { name: '中秋节', date: '2026-10-03', weekday: '周六', daysLeft: 218, emoji: '🥮' },
    { name: '重阳节', date: '2026-10-21', weekday: '周三', daysLeft: 236, emoji: '👴' },
    { name: '立冬', date: '2026-11-07', weekday: '周六', daysLeft: 253, emoji: '❄️' },
    { name: '感恩节', date: '2026-11-26', weekday: '周四', daysLeft: 272, emoji: '🦃' },
    { name: '大雪', date: '2026-12-07', weekday: '周一', daysLeft: 283, emoji: '🌨️' },
    { name: '冬至', date: '2026-12-22', weekday: '周二', daysLeft: 298, emoji: '🥟' },
    { name: '圣诞节', date: '2026-12-25', weekday: '周五', daysLeft: 301, emoji: '🎄' },
  ];

  const scroll = (direction) => {
    if (scrollRef.current) {
      const scrollAmount = direction === 'left' ? -300 : 300;
      scrollRef.current.scrollBy({ left: scrollAmount, behavior: 'smooth' });
    }
  };

  return (
    <section className="festival">
      <div className="festival-container">
        <div className="festival-scroll" ref={scrollRef}>
          {festivals.map((item, index) => (
            <div 
              key={item.name} 
              className="festival-card"
              style={{ '--delay': `${index * 0.08}s` }}
            >
              <div className="festival-emoji">{item.emoji}</div>
              <div className="festival-content">
                <h3 className="festival-name">{item.name}</h3>
                <p className="festival-date">{item.date} {item.weekday}</p>
              </div>
              <div className="festival-days">
                <span className="days-number">{item.daysLeft}</span>
                <span className="days-text">天后</span>
              </div>
            </div>
          ))}
        </div>
        <Button 
          className="festival-scroll-btn" 
          shape="circle" 
          icon={<RightOutlined />}
          onClick={() => scroll('right')}
        />
      </div>
    </section>
  );
};

export default Festival;
