import React from 'react';
import { Link } from 'wouter';
import './GroupDetail.css';

const GroupMembers = ({ members }) => {
  return (
    <section className="group-section">
      <h2>成员列表</h2>
      <div className="member-list">
        {members.length > 0 ? (
          members.map(m => (
            <Link href={`/information/${m.user_id}`} key={m.user_id} className="member-link">
              <div className="member-card">
                <img 
                  src={m.avatar_url || 'https://picsum.photos/100/100'} 
                  alt={m.username} 
                  className="member-avatar"
                />
                <p className="member-name">{m.username}</p>
              </div>
            </Link>
          ))
        ) : (
          <p className="empty-message">暂无成员</p>
        )}
      </div>
    </section>
  );
};

export default GroupMembers;