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

import type { Post } from "../../../types/post";
import { useLightbox } from "../overlays/ImageLightbox";

export function ImageBubble({ post }: { post: Post }) {
  const { openLightbox } = useLightbox();
  const att = post.attachments[0];
  if (!att) return null;
  const ratio =
    att.width && att.height ? `${att.width} / ${att.height}` : "4 / 3";

  return (
    <button
      type="button"
      onClick={() => openLightbox([att], 0, undefined, post.id)}
      className="relative block w-full overflow-hidden rounded-xl max-h-[240px] min-[440px]:max-h-[270px] md:max-h-[320px] lg:max-h-[360px]"
      aria-label={att.filename}
    >
      <img
        src={att.url}
        alt={att.filename}
        loading="lazy"
        className="h-full w-full object-cover"
        style={{ aspectRatio: ratio }}
      />
    </button>
  );
}