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

export function ImageWithTextBubble({ 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 (
    <div className="flex flex-col gap-1.5">
      <button
        type="button"
        onClick={() => openLightbox([att], 0)}
        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>
      {post.text ? (
        <div className="whitespace-pre-wrap break-words text-[14px] leading-snug text-neutral-100">
          {autolink(post.text)}
        </div>
      ) : null}
    </div>
  );
}