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

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

const MAX_VISIBLE = 4;

function imageRatio(att: Attachment) {
  return att.width && att.height ? `${att.width} / ${att.height}` : "4 / 3";
}

export function AlbumBubble({ post }: { post: Post }) {
  const { openLightbox } = useLightbox();
  const { lang } = useI18n();
  const images = post.attachments;
  const text = postDisplayText(post, lang);
  const shouldMerge = images.length > MAX_VISIBLE;

  if (!shouldMerge) {
    return (
      <div className="flex flex-col gap-1.5">
        {images.map((att, i) => (
          <button
            key={att.id}
            type="button"
            onClick={() => openLightbox(images, i, text, post.id)}
            className="relative block max-h-[180px] w-full overflow-hidden rounded-xl min-[440px]:max-h-[200px] md:max-h-[240px] lg:max-h-[280px]"
            aria-label={att.filename}
          >
            <img
              src={att.url}
              alt={att.filename}
              loading="lazy"
              className="h-full w-full object-cover"
              style={{ aspectRatio: imageRatio(att) }}
            />
          </button>
        ))}
        {text ? (
          <div className="whitespace-pre-wrap break-words text-[14px] leading-snug text-neutral-100">
            {autolink(text)}
          </div>
        ) : null}
      </div>
    );
  }

  const visible = images.slice(0, MAX_VISIBLE);
  const extra = images.length - MAX_VISIBLE;

  return (
    <div className="flex flex-col gap-1.5">
      <div className="grid h-[220px] grid-cols-2 grid-rows-2 gap-[2px] overflow-hidden rounded-xl min-[440px]:h-[250px] md:h-[300px] lg:h-[340px]">
        {visible.map((att, i) => {
          const isLastSlot = i === MAX_VISIBLE - 1 && extra > 0;
          return (
            <button
              key={att.id}
              type="button"
              onClick={() => openLightbox(images, i, text, post.id)}
              className="relative block h-full w-full overflow-hidden"
              aria-label={att.filename}
            >
              <img
                src={att.thumbnailUrl ?? att.url}
                alt={att.filename}
                loading="lazy"
                className={`h-full w-full object-cover ${
                  isLastSlot ? "blur-sm scale-105" : ""
                }`}
              />
              {isLastSlot ? (
                <div className="absolute inset-0 flex items-center justify-center bg-black/45 text-3xl font-semibold text-white">
                  +{extra}
                </div>
              ) : null}
            </button>
          );
        })}
      </div>
      {text ? (
        <div className="whitespace-pre-wrap break-words text-[14px] leading-snug text-neutral-100">
          {autolink(text)}
        </div>
      ) : null}
    </div>
  );
}