import React from "react";
import checkGreenIcon from "../../../../../assets/checkGreeIcon.svg";
import { Tooltip } from "../../../../Tooltip";
import { useTextOverflow } from "../../../../../utils/useTextOverflow";

const ChatHeaderInfo = ({ title, createdBy, createdAt, chatId }) => {
  const { textRef: fullTextRef, isOverflowing: isFullTextOverflowing } =
    useTextOverflow();

  // Construct the complete text for display and tooltip
  const fullText = `${
    chatId ? `ID : ${chatId.slice(0, 6)}... ` : ""
  }created by  ${createdBy}${createdAt ? ` at  ${createdAt}` : ""}`;

  return (
    <div className="chat-header-content">
      <h1 className="chat-title">
        {title}
        {/* <span className="resolved-badge">
          <img src={checkGreenIcon} alt="check-green" />
          Resolve
        </span> */}
      </h1>

      <Tooltip
        title={fullText}
        isHoverEnabled={isFullTextOverflowing}
        variant="tertiary"
        orientation="bottom"
      >
        <div
          ref={fullTextRef}
          className="chat-info-container chat-text-ellipsis"
        >
          {fullText}
        </div>
      </Tooltip>
    </div>
  );
};

export default ChatHeaderInfo;
