import { useParams, useNavigate } from 'react-router-dom';
import { Button } from 'antd';
import { LeftOutlined } from '@ant-design/icons';
import Header from '../components/Header';
import Footer from '../components/Footer';
import Works from '../components/Works';
import './CategoryDetail.css';

const CategoryDetail = () => {
  const { name } = useParams();
  const navigate = useNavigate();

  // 分类数据映射
  const categoryData = {
    '文化墙': { count: '6572', gradient: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)' },
    '周年庆': { count: '15868', gradient: 'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)' },
    '直播': { count: '35429', gradient: 'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)' },
    '包装': { count: '9533', gradient: 'linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)' },
    '科技': { count: '44921', gradient: 'linear-gradient(135deg, #0c3483 0%, #a2b6df 100%)' },
    '活动': { count: '408131', gradient: 'linear-gradient(135deg, #fa709a 0%, #fee140 100%)' },
    '医美': { count: '223068', gradient: 'linear-gradient(135deg, #a8edea 0%, #fed6e3 100%)' },
    '邀请函': { count: '15361', gradient: 'linear-gradient(135deg, #d299c2 0%, #fef9d7 100%)' },
  };

  const category = categoryData[name];

  return (
    <div className="category-detail-page">
      <Header />
      
      <div className="category-detail-hero" style={{ background: category?.gradient }}>
        <div className="category-detail-overlay">
          <Button 
            icon={<LeftOutlined />} 
            className="back-btn"
            onClick={() => navigate('/')}
          >
            返回首页
          </Button>
          <div className="category-detail-content">
            <h1 className="category-detail-title">{name}</h1>
            <p className="category-detail-count">共 {category?.count} 张作品</p>
          </div>
        </div>
      </div>

      <div className="category-detail-works">
        <Works categoryFilter={name} />
      </div>

      <Footer />
    </div>
  );
};

export default CategoryDetail;
