import CustomLoading from "@/app/component/loading/Custom";
import MultilineLoading from "@/app/component/loading/Multiline";
import Image from "next/image";
import React from "react";

function Caption({ data, loading }) {
  return (
    <>
      <CustomLoading loading={loading} width="full" height={500}>
        <Image
          className="rounded-[8px] overflow-hidden w-full"
          src={data.cover_first}
          alt="cover-blog"
          height={570}
          width={808}
        />
      </CustomLoading>
      <div className={loading ? "my-4" : ""}>
        <MultilineLoading loading={loading} width="full" height={18} line={20}>
          <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 }}
          />
        </MultilineLoading>
      </div>
      <CustomLoading loading={loading} width="full" height={500}>
        <Image
          className="rounded-[8px] overflow-hidden w-full"
          src={data.cover_second}
          alt="cover-blog"
          height={570}
          width={808}
        />
      </CustomLoading>
      <div className={loading ? "my-4" : ""}>
        <MultilineLoading loading={loading} width="full" height={18} line={20}>
          <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 }}
          />
        </MultilineLoading>
      </div>
    </>
  );
}

export default Caption;