import { useI18n } from "../../../i18n";
import type { Post } from "../../../types/post";
import { useLightbox } from "../overlays/ImageLightbox";
import { AttachmentDownloadPill } from "../AttachmentDownloadPill";
import { BubbleImage } from "../BubbleImage";
import { autolink } from "../utils/autolink";
import { postDisplayText } from "../utils/postText";

export function ImageWithTextBubble({ post }: { post: Post }) {
  const { openLightbox } = useLightbox();
  const { lang } = useI18n();
  const att = post.attachments[0];
  const text = postDisplayText(post, lang);
  if (!att) return null;
  return (
    <div className="flex flex-col">
      <div className="relative h-[180px] w-full overflow-hidden bg-black min-[440px]:h-[210px] md:h-[260px] lg:h-[300px]">
        <button
          type="button"
          onClick={() => openLightbox([att], 0, text, post.id)}
          className="block h-full w-full"
          aria-label="View image"
        >
          <BubbleImage
            src={att.url}
            loading="lazy"
            className="h-full w-full object-cover"
          />
        </button>
        <AttachmentDownloadPill postId={post.id} attachment={att} />
      </div>
      {text ? (
        <div className="message-stream-copyable-text select-text whitespace-pre-wrap break-words px-4 pt-3 text-[14px] leading-6 text-neutral-100">
          {autolink(text)}
        </div>
      ) : null}
    </div>
  );
}