import Image from "next/image";
import React from "react";

function Caption({ data }) {
  return (
    <>
      <Image
        className="rounded-[8px] overflow-hidden w-full"
        src={data?.cover_first}
        alt="cover-blog"
        height={570}
        width={808}
      />
      <div>
        <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?.caption" }}
        />
      </div>
      <Image
        className="rounded-[8px] overflow-hidden w-full"
        src={data?.cover_second}
        alt="cover-blog"
        height={570}
        width={808}
      />
      <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?.caption" }}
      />
    </>
  );
}

export default Caption;