import type React from 'react';
import cs from 'classnames';
import { Avatar } from 'tuikit-atomicx-react/chat';
import styles from './FriendItem.module.scss';
import type { FriendItemProps } from '../../../../types/contact';

export const FriendItem: React.FC<FriendItemProps> = ({
  friend,
  isActive,
  onClick,
  className,
  style,
}) => {
  const handleClick = () => onClick?.(friend);

  return (
    <div
      className={cs(styles.friendItem, className, isActive && styles['friendItem--active'])}
      style={style}
      onClick={handleClick}
      role="button"
      tabIndex={0}
      onKeyDown={e => (e.key === 'Enter' || e.key === ' ') && handleClick()}
    >
      <div className={styles.friendItem__avatar}>
        <Avatar
          {...(friend?.avatarURL && { src: friend.avatarURL })}
          alt={friend.friendRemark || friend?.nickname || friend.userID}
        />
      </div>
      <div className={styles.friendItem__content}>
        <div className={styles.friendItem__name}>
          {friend.friendRemark || friend?.nickname || friend.userID}
        </div>
      </div>
    </div>
  );
};