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

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

  return (
    <>
      {cover && cover.trim() !== "" && (
        <div className="relative w-full aspect-video rounded-[8px] overflow-hidden">
          <Image
            src={cover}
            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;