import React from "react";

function Caption({ data }) {
  const imageUrl = data?.images?.[0]?.url;

  return (
    <>
      {imageUrl && imageUrl.trim() !== "" && (
        <img
          className="rounded-[8px] overflow-hidden w-full object-cover"
          src={imageUrl}
          alt={data?.title || "blog cover"}
        />
      )}
      {data?.body?.value && (
        <div
          className="my-[12px] sm:my-[16px] md:my-[20px] lg:my-[24px] text-[#525252] text-[14px] md:text-[15px] lg:text-[16px] font-normal leading-[26px] sm:leading-[28px] md:leading-[30px] lg:leading-[32px]"
          dangerouslySetInnerHTML={{ __html: data.body.value }}
        />
      )}
    </>
  );
}

export default Caption;