import type React from 'react';
import cs from 'classnames';
import { DEFAULT_GROUP_COMMON_AVATAR } from '../../../../constant/avatar';
import { Avatar } from 'tuikit-atomicx-react/chat';
import styles from './GroupItem.module.scss';
import type { GroupItemProps } from '../../../../types/contact';

export const GroupItem: React.FC<GroupItemProps> = ({
  group,
  isActive,
  onClick,
  className,
  style,
}) => {
  const handleClick = () => onClick?.(group);

  return (
    <div
      className={cs(styles.groupItem, className, isActive && styles['groupItem--active'])}
      style={style}
      onClick={handleClick}
      role="button"
      tabIndex={0}
      onKeyDown={e => (e.key === 'Enter' || e.key === ' ') && handleClick()}
    >
      <div className={styles.groupItem__avatar}>
        <Avatar
          src={group.avatarURL || DEFAULT_GROUP_COMMON_AVATAR}
          alt={group.groupName || group.groupID}
        />
      </div>
      <div className={styles.groupItem__content}>
        <div className={styles.groupItem__name}>{group.groupName || group.groupID}</div>
      </div>
    </div>
  );
};