import type { Attachment } from "../../../types/post";
import { AttachmentDownloadPill } from "../AttachmentDownloadPill";
import { useLightbox } from "../overlays/ImageLightbox";
import { AdaptiveImageFrame } from "./AdaptiveImageFrame";

/**
 * A single image inside a message bubble. Shown at its real aspect ratio (no
 * top/bottom cropping) via {@link AdaptiveImageFrame}.
 */
export function SingleImageFrame({
  postId,
  attachment,
  text,
}: {
  postId: string;
  attachment: Attachment;
  text?: string;
}) {
  const { openLightbox } = useLightbox();
  return (
    <AdaptiveImageFrame
      attachment={attachment}
      // Show the lightweight thumbnail in-stream for fast, progressive loading;
      // the full image is loaded on tap in the lightbox. Falls back to the full
      // asset if no thumbnail exists.
      src={attachment.thumbnailUrl ?? attachment.thumbUrl ?? attachment.url}
      fallbackSrc={[attachment.thumbUrl, attachment.url]}
      onOpen={() => openLightbox([attachment], 0, text, postId)}
      ariaLabel="View image"
    >
      <AttachmentDownloadPill postId={postId} attachment={attachment} />
    </AdaptiveImageFrame>
  );
}
