import React from "react";
import { List, Avatar, Badge } from "antd";
import { ContactData } from "./data";
import styles from "./ContactListSimple.module.scss";

interface ContactListSimpleProps {
  contacts: ContactData[];
  onContactClick: (contact: ContactData) => void;
  selectedContactId?: ContactData;
}

const ContactListSimple: React.FC<ContactListSimpleProps> = ({
  contacts,
  onContactClick,
  selectedContactId,
}) => {
  return (
    <div className={styles.contactListSimple}>
      <div className={styles.header}>全部好友</div>
      <List
        className={styles.list}
        dataSource={contacts}
        renderItem={contact => (
          <List.Item
            key={contact.id}
            onClick={() => onContactClick(contact)}
            className={`${styles.contactItem} ${contact.id === selectedContactId?.id ? styles.selected : ""}`}
          >
            <div className={styles.avatarContainer}>
              <Avatar
                src={contact.avatar}
                icon={
                  !contact.avatar && <span>{contact.nickname.charAt(0)}</span>
                }
                className={styles.avatar}
              />
            </div>
            <div className={styles.contactInfo}>
              <div className={styles.name}>{contact.nickname}</div>
            </div>
          </List.Item>
        )}
      />
    </div>
  );
};

export default ContactListSimple;