import { Card, Button, Avatar, Row, Col } from 'antd';
import { PlusOutlined, UserOutlined } from '@ant-design/icons';
import './Designers.css';

const Designers = () => {
  const designers = [
    { id: 1, name: '顾九思', works: 223, fans: 546, avatar: '🎨' },
    { id: 2, name: '下辈子别做设计', works: 380, fans: 1099, avatar: '🖼️' },
    { id: 3, name: 'h突然的', works: 537, fans: 574, avatar: '✨' },
    { id: 4, name: '赤木流歌', works: 300, fans: 735, avatar: '🎭' },
    { id: 5, name: '秃头选手', works: 311, fans: 538, avatar: '🎯' },
    { id: 6, name: 'M.A', works: 553, fans: 567, avatar: '🌟' },
    { id: 7, name: 'NIMINMIN', works: 305, fans: 1208, avatar: '💫' },
    { id: 8, name: '星玥设计', works: 402, fans: 576, avatar: '⭐' },
    { id: 9, name: '一十九', works: 1598, fans: 2457, avatar: '🔥' },
    { id: 10, name: 'Jance', works: 341, fans: 3424, avatar: '💎' },
  ];

  const getGradient = (index) => {
    const gradients = [
      'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
      'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)',
      'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)',
      'linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)',
      'linear-gradient(135deg, #fa709a 0%, #fee140 100%)',
      'linear-gradient(135deg, #a8edea 0%, #fed6e3 100%)',
      'linear-gradient(135deg, #d299c2 0%, #fef9d7 100%)',
      'linear-gradient(135deg, #89f7fe 0%, #66a6ff 100%)',
      'linear-gradient(135deg, #fddb92 0%, #d1fdff 100%)',
      'linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%)',
    ];
    return gradients[index % gradients.length];
  };

  return (
    <section className="designers-section">
      <div className="section-header">
        <h2 className="section-title">设计师</h2>
      </div>
      
      <Row gutter={[16, 16]} className="designers-grid">
        {designers.map((designer, index) => (
          <Col xs={12} sm={8} md={6} lg={4} xl={4} key={designer.id}>
            <Card 
              className="designer-card"
              style={{ '--delay': `${index * 0.05}s` }}
            >
              <div className="designer-avatar" style={{ background: getGradient(index) }}>
                <span className="avatar-emoji">{designer.avatar}</span>
              </div>
              <h3 className="designer-name">{designer.name}</h3>
              <p className="designer-desc">他/她已上传作品</p>
              <div className="designer-works">{designer.works}</div>
              <div className="designer-fans">
                <span className="fans-count">{designer.fans}</span>
                <span className="fans-text"> 粉丝</span>
              </div>
              <Button 
                className="follow-btn"
                icon={<PlusOutlined />}
              >
                关注
              </Button>
            </Card>
          </Col>
        ))}
      </Row>
    </section>
  );
};

export default Designers;
