import CustomLoading from '@/app/component/loading/Custom'
import TextLoading from '@/app/component/loading/Text'
import Image from 'next/image'
import Link from 'next/link'

function Head({ loading }) {
    return (
        <div className='flex flex-col lg:flex-row mt-[40px] items-center justify-center gap-[16px] sm:gap-[19px] md:gap-[22px] lg:gap-[24px]'>
            <Link href='#' className='w-full lg:w-1/2 cover-head-blogs'>
                <CustomLoading loading={loading} width='full' height={400}>
                    <Image
                        src='/assets/images/head-blogs-1.png'
                        width={600}
                        height={424}
                        alt='head blog'
                    />
                </CustomLoading>
                <div className={loading ? '!absolute !bottom-[26px] !right-[16px] md:!right-[20px] lg:!right-[24px]' : ''}>
                    <TextLoading width={150} height={20} loading={loading}>
                        <p className='text-[14px] sm:text-[17px] md:text-[20px] lg:text-[24px] right-[16px] md:right-[20px] lg:right-[24px]'>روش های خانگی محافظت از پوست در تابستان</p>
                    </TextLoading>
                </div>
            </Link>
            <div className='w-full lg:w-1/2 flex flex-col items-center justify-center gap-[16px] sm:gap-[19px] md:gap-[22px] lg:gap-[24px]'>
                <div className='w-full flex flex-col sm:flex-row items-center justify-center gap-[16px] sm:gap-[19px] md:gap-[22px] lg:gap-[24px]'>
                    <Link href='#' className='w-full cover-head-blogs'>
                        <CustomLoading loading={loading} width='full' height={180}>
                            <Image
                                src='/assets/images/head-blogs-2.png'
                                width={600}
                                height={424}
                                alt='head blog'
                            />
                        </CustomLoading>
                        <div className={loading ? '!absolute !bottom-[26px] !right-[16px] md:!right-[20px] lg:!right-[24px]' : ''}>
                            <TextLoading width={150} height={20} loading={loading}>
                                <p className='!text-[14px] md:!text-[16px] !bottom-[20px] !right-[16px]'>فواید نوشیدن آب برای سلامتی</p>
                            </TextLoading>
                        </div>
                    </Link>
                    <Link href='#' className='w-full cover-head-blogs'>
                        <CustomLoading loading={loading} width='full' height={180}>
                            <Image
                                src='/assets/images/head-blogs-3.png'
                                width={600}
                                height={424}
                                alt='head blog'
                            />
                        </CustomLoading>
                        <div className={loading ? '!absolute !bottom-[26px] !right-[16px] md:!right-[20px] lg:!right-[24px]' : ''}>
                            <TextLoading width={150} height={20} loading={loading}>
                                <p className='!text-[14px] md:!text-[16px] !bottom-[20px] !right-[16px]'>راهکارهای ساده برای درمان سر درد</p>
                            </TextLoading>
                        </div>
                    </Link>
                </div>
                <Link href='#' className='w-full cover-head-blogs'>
                    <CustomLoading loading={loading} width='full' height={180}>
                        <Image
                            src='/assets/images/head-blogs-4.png'
                            width={600}
                            height={424}
                            alt='head blog'
                        />
                    </CustomLoading>
                    <div className={loading ? '!absolute !bottom-[26px] !right-[16px] md:!right-[20px] lg:!right-[24px]' : ''}>
                        <TextLoading width={150} height={20} loading={loading}>
                            <p className='text-[14px] sm:text-[17px] md:text-[20px] lg:text-[24px] right-[16px] md:right-[20px] lg:right-[24px]'>تغذیه مناسب برای کاهش فشار خون</p>
                        </TextLoading>
                    </div>
                </Link>
            </div>
        </div>
    )
}

export default Head