Arkie-Library-Frontend/src/components/messageStream/bubbles/ImageWithTextBubble.tsx

import { ArrowDownToLine, LoaderCircle } from "lucide-react";
import { useState } from "react";
import { useI18n } from "../../../i18n";
import type { Post } from "../../../types/post";
import { useLightbox } from "../overlays/ImageLightbox";
import { autolink } from "../utils/autolink";
import { downloadAttachment } from "../utils/downloadFile";
import { formatBytes } from "../utils/formatBytes";
import { postDisplayText } from "../utils/postText";

export function ImageWithTextBubble({ post }: { post: Post }) {
  const { openLightbox } = useLightbox();
  const { lang, t } = useI18n();
  const [isDownloading, setIsDownloading] = useState(false);
  const att = post.attachments[0];
  const text = postDisplayText(post, lang);
  if (!att) return null;
  const ratio =
    att.width && att.height ? `${att.width} / ${att.height}` : "4 / 3";

  return (
    <div className="relative overflow-hidden rounded-xl bg-black/20">
      <button
        type="button"
        onClick={() => openLightbox([att], 0, text, post.id)}
        className="block w-full"
        aria-label={att.filename}
      >
        <img
          src={att.url}
          alt={att.filename}
          loading="lazy"
          className="block h-auto w-full"
          style={{ aspectRatio: ratio }}
        />
      </button>
      <button
        type="button"
        onClick={(e) => {
          e.stopPropagation();
          if (isDownloading) return;
          setIsDownloading(true);
          void downloadAttachment(post.id, att.id, att.filename)
            .finally(() => setIsDownloading(false))
            .catch(() => {});
        }}
        disabled={isDownloading}
        className="group absolute left-3 top-3 z-10 inline-flex overflow-hidden rounded-full bg-black/45 text-xs text-white shadow-lg ring-1 ring-white/15 backdrop-blur-md transition hover:bg-black/60 disabled:cursor-wait"
        aria-label={
          isDownloading ? t("downloading") : `Download ${att.filename}`
        }
        aria-busy={isDownloading}
      >
        <span className="flex h-8 w-8 items-center justify-center bg-white/10 transition group-hover:bg-white/15">
          {isDownloading ? (
            <LoaderCircle className="h-4 w-4 animate-spin" strokeWidth={2.3} />
          ) : (
            <ArrowDownToLine className="h-4 w-4" strokeWidth={2.3} />
          )}
        </span>
        <span className="flex h-8 items-center gap-1 px-2.5">
          {isDownloading ? t("downloading") : formatBytes(att.sizeBytes)}
        </span>
      </button>
      {text ? (
        <div className="bg-gradient-to-b from-ark-panel/90 to-ark-panel px-4 py-3 text-[14px] leading-snug text-neutral-100">
          <div className="message-stream-copyable-text select-text whitespace-pre-wrap break-words">
            {autolink(text)}
          </div>
        </div>
      ) : null}
    </div>
  );
}