import React from "react";
import Image from "next/image";
import { sanitizeHtml } from "@/lib/sanitize";

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

  return (
    <>
      {imageUrl && imageUrl.trim() !== "" && (
        <div className="relative w-full aspect-video rounded-[8px] overflow-hidden">
          <Image
            src={imageUrl}
            alt={data?.title || "blog cover"}
            fill
            className="object-cover"
          />
        </div>
      )}
      {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: sanitizeHtml(data.body.value) }}
        />
      )}
    </>
  );
}

export default Caption;