import TextLoading from "@/app/component/loading/Text"

function Head({ data, loading }) {
    return (
        <div>
            <TextLoading width={200} height={18} loading={loading}>
                <div className="flex items-center justify-start gap-1">
                    <p className="text-[#9B9B9B] text-[11px] sm:text-[13px] md:text-[15px] lg:text-[16px] font-normal">بلاگ {'>'}</p>
                    <p className="text-[#9B9B9B] text-[11px] sm:text-[13px] md:text-[15px] lg:text-[16px] font-normal">پوست و مو {'>'}</p>
                    <p className="text-[#525252] text-[11px] sm:text-[13px] md:text-[15px] lg:text-[16px] font-normal">روش های خانگی محافظت از پوست در تابستان</p>
                </div>
            </TextLoading>
            <div className={loading ? 'mt-[24px] sm:mt-[29px] md:mt-[35px] lg:mt-[40px]' : ''}>
                <TextLoading width={250} height={22} loading={loading}>
                    <p className="text-[#3B3B3B] mt-[24px] sm:mt-[29px] md:mt-[35px] lg:mt-[40px] text-[14px] sm:text-[17px] md:text-[20px] lg:text-[24px] font-bold">روش های خانگی محافظت از پوست در تابستان</p>
                </TextLoading>
            </div>
            <div className="flex mt-[16px] sm:mt-[18px] md:mt-[21px] lg:mt-[24px] items-center justify-start gap-[35px]">
                <div className="flex items-center justify-start gap-1">
                    <p className="text-[#9B9B9B] text-[11px] md:text-[13px] lg:text-[14px] font-normal">تاریخ انتشار:</p>
                    <TextLoading width={55} height={22} loading={loading}>
                        <p className="text-[#9B9B9B] text-[11px] md:text-[14px] lg:text-[16px] font-medium">{data.date_of_release}</p>
                    </TextLoading>
                </div>
                <div className="flex items-center justify-start gap-1">
                    <p className="text-[#9B9B9B] text-[11px] md:text-[13px] lg:text-[14px] font-normal">زمان مطالعه:</p>
                    <TextLoading width={55} height={22} loading={loading}>
                        <p className="text-[#9B9B9B] text-[11px] md:text-[14px] lg:text-[16px] font-medium">{data.time}</p>
                    </TextLoading>
                </div>
            </div>
        </div>
    )
}

export default Head