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

export const BlacklistItem: React.FC<BlacklistItemProps> = ({
  profile,
  isActive,
  onClick,
  className,
  style,
}) => {
  const handleClick = () => onClick?.(profile);

  return (
    <div
      className={cs(styles.blacklistItem, className, isActive && styles['blacklistItem--active'])}
      style={style}
      onClick={handleClick}
      role="button"
      tabIndex={0}
      onKeyDown={e => (e.key === 'Enter' || e.key === ' ') && handleClick()}
    >
      <div className={styles.blacklistItem__avatar}>
        <Avatar
          {...(profile.avatarURL && { src: profile.avatarURL })}
          alt={profile.nickname || profile.userID}
        />
      </div>
      <div className={styles.blacklistItem__content}>
        <div className={styles.blacklistItem__name}>{profile.nickname || profile.userID}</div>
      </div>
    </div>
  );
};