import { SearchType } from '../../../../../types/search';
import { highlightText } from '../../../../../utils';
import { Avatar } from 'tuikit-atomicx-react/chat';
import { DEFAULT_GROUP_COMMON_AVATAR } from '../../../../../constant/avatar';
import styles from './Group.module.scss';
import type { ResultItemProps } from '../../../../../types/search';

export function Group({ data, keyword, onClick }: ResultItemProps<SearchType.GROUP>) {
  const { groupInfo } = data;
  return (
    <div className={styles.SearchGroup} onClick={() => onClick?.(data, SearchType.GROUP)}>
      <div className={styles.SearchGroup__avatar}>
        <Avatar
          src={groupInfo?.avatarURL || groupInfo?.groupAvatarURL || DEFAULT_GROUP_COMMON_AVATAR}
          alt={groupInfo?.groupName || groupInfo?.groupID}
        />
      </div>
      <div className={styles.SearchGroup__info}>
        <div
          className={styles.SearchGroup__name}
          dangerouslySetInnerHTML={{
            __html: highlightText(groupInfo?.groupName || groupInfo?.groupID, keyword),
          }}
        />
        {groupInfo?.introduction && (
          <div
            className={styles.SearchGroup__intro}
            dangerouslySetInnerHTML={{
              __html: highlightText(groupInfo.introduction, keyword),
            }}
          />
        )}
      </div>
    </div>
  );
}

export default Group;