import { useI18n } from "../../../i18n";
import type { Post } from "../../../types/post";
import { autolink } from "../utils/autolink";
import { postDisplayText } from "../utils/postText";
import { CollapsibleText } from "../CollapsibleText";
import { SingleImageFrame } from "./SingleImageFrame";

export function ImageWithTextBubble({ post }: { post: Post }) {
  const { lang } = useI18n();
  const att = post.attachments[0];
  const text = postDisplayText(post, lang);
  if (!att) return null;
  return (
    <div className="flex flex-col">
      <SingleImageFrame postId={post.id} attachment={att} text={text} />
      {text ? (
        <CollapsibleText
          wrapperClassName="px-4 pt-3"
          className="message-stream-copyable-text select-text whitespace-pre-wrap break-words text-[14px] leading-6 text-neutral-100"
        >
          {autolink(text)}
        </CollapsibleText>
      ) : null}
    </div>
  );
}