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

interface SearchResultRowProps {
  /** Avatar image URL. */
  avatarURL?: string | undefined;
  /** Accessible alt text / fallback for the avatar. */
  alt?: string | undefined;
  /** Primary line (e.g. name). Accepts a <HighlightText> node. */
  title: React.ReactNode;
  /** Optional secondary line (e.g. signature, member count). */
  subtitle?: React.ReactNode;
  onClick?: (() => void) | undefined;
  className?: string | undefined;
}

/**
 * Generic result row: avatar + title + optional subtitle.
 * Shared by user / group / conversation result entries.
 */
export function SearchResultRow({
  avatarURL,
  alt,
  title,
  subtitle,
  onClick,
  className,
}: SearchResultRowProps) {
  return (
    <div className={cs(styles.SearchResultRow, className)} onClick={onClick}>
      <div className={styles.SearchResultRow__avatar}>
        <Avatar {...(avatarURL && { src: avatarURL })} {...(alt && { alt })} />
      </div>
      <div className={styles.SearchResultRow__info}>
        <div className={styles.SearchResultRow__title}>{title}</div>
        {subtitle !== undefined && subtitle !== null && (
          <div className={styles.SearchResultRow__subtitle}>{subtitle}</div>
        )}
      </div>
    </div>
  );
}

export default SearchResultRow;