import React from 'react';
import cs from 'classnames';
import { SearchType } from '../../../../types/search';
import { Conversation } from './Conversation';
import { Group } from './Group';
import { Message } from './Message';
import styles from './SearchResultsItem.module.scss';
import { User } from './User';
import type { ResultItemProps } from '../../../../types/search';

export function SearchResultItem({
  keyword,
  onClick,
  data,
  type,
  className,
}: ResultItemProps<SearchType>) {
  return (
    <div className={cs(styles.SearchResultsItem, className)}>
      {type === SearchType.MESSAGE && (
        <Conversation
          data={data as ResultItemProps<SearchType.MESSAGE>['data']}
          keyword={keyword}
          {...(onClick && { onClick })}
        />
      )}
      {type === SearchType.USER && (
        <User
          data={data as ResultItemProps<SearchType.USER>['data']}
          keyword={keyword}
          {...(onClick && { onClick })}
        />
      )}
      {type === SearchType.GROUP && (
        <Group
          data={data as ResultItemProps<SearchType.GROUP>['data']}
          keyword={keyword}
          {...(onClick && { onClick })}
        />
      )}
      {type === SearchType.CHAT_MESSAGE && (
        <Message
          data={data as ResultItemProps<SearchType.CHAT_MESSAGE>['data']}
          keyword={keyword}
          {...(onClick && { onClick })}
        />
      )}
    </div>
  );
}

export default React.memo(SearchResultItem);