import { useRef } from 'react';
import { useNavigate } from 'react-router-dom';
import { Card, Button } from 'antd';
import { RightOutlined } from '@ant-design/icons';
import './Categories.css';

const Categories = () => {
  const scrollRef = useRef(null);
  const navigate = useNavigate();

  const categories = [
    { name: '活动', count: '408131', gradient: 'linear-gradient(135deg, #fa709a 0%, #fee140 100%)' },
    { name: '中式', count: '105545', gradient: 'linear-gradient(135deg, #c94b4b 0%, #4b134f 100%)' },
    { name: '直播', count: '35429', gradient: 'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)' },
    { name: '旅游', count: '97826', gradient: 'linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)' },
    { name: '周年庆', count: '15868', gradient: 'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)' },
    { name: '长图', count: '130856', gradient: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)' },
    { name: '价值点', count: '214448', gradient: 'linear-gradient(135deg, #0c3483 0%, #a2b6df 100%)' },
    { name: '酒吧', count: '36397', gradient: 'linear-gradient(135deg, #ff6b35 0%, #ff8c42 100%)' },
  ];

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

  const handleCategoryClick = (categoryName) => {
    navigate(`/category/${categoryName}`);
  };

  return (
    <section className="categories">
      <div className="categories-container">
        <div className="categories-scroll" ref={scrollRef}>
          {categories.map((cat, index) => (
            <div 
              key={cat.name} 
              className="category-card" 
              style={{ '--delay': `${index * 0.1}s` }}
              onClick={() => handleCategoryClick(cat.name)}
            >
              <div className="category-image" style={{ background: cat.gradient }}>
                <div className="category-overlay">
                  <span className="category-icon">{cat.name.charAt(0)}</span>
                </div>
              </div>
              <div className="category-info">
                <span className="category-name">{cat.name}</span>
                <span className="category-count">{cat.count} 张</span>
              </div>
            </div>
          ))}
        </div>
        <Button 
          className="scroll-btn scroll-btn-right" 
          shape="circle" 
          icon={<RightOutlined />}
          onClick={() => scroll('right')}
        />
      </div>
    </section>
  );
};

export default Categories;