import { getChatDisplayInfo } from "../../utils/chatDisplay";
import TrashIcon from "../icons/TrashIcon";

export default function ChatListItem({ chat, post, unreadMap, t, onOpen, onDelete }) {
  const { title, imgSrc, emoji, unreadCount, preview } = getChatDisplayInfo(chat, post, unreadMap, t);

  return (
      <div
          className={`chat-list-item${unreadCount > 0 ? " unread" : ""}`}
          onClick={() => onOpen(chat.id)}
      >
        <div className="chat-list-avatar">
          {imgSrc ? (
              <img src={imgSrc} alt="" className="chat-list-avatar-img" />
          ) : (
              emoji || chat.otherUserName?.[0] || chat.otherUser?.name?.[0] || "?"
          )}
        </div>
        <div className="chat-list-info">
          <div className="chat-list-name">{title}</div>
          <div className="chat-list-preview">
            {preview}
          </div>
        </div>
        {unreadCount > 0 && (
            <div className="chat-list-unread-badge">{unreadCount > 99 ? "99+" : unreadCount}</div>
        )}
        <button
            className="chat-list-delete-btn"
            title={t('chat.deleteChat')}
            onClick={(e) => {
              e.stopPropagation();
              onDelete(chat.id);
            }}
        >
          <TrashIcon />
        </button>
      </div>
  );
}