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