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

export function ImageBubble({ post }: { post: Post }) {
  const { openLightbox } = useLightbox();
  const att = post.attachments[0];
  if (!att) return null;
  return (
    <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, undefined, 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>
  );
}