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 Article({ data, loading }) {
    return (
        <li className='rounded-[8px] overflow-hidden bg-[#FFF] shadow-[0px_0px_41px_0px_rgba(173,_181,_189,_0.15)]'>
            <CustomLoading width='full' height={200} loading={loading}>
                <Link href={`/blog/${data.id}`}>
                    <Image
                        className='w-full'
                        alt="article-img"
                        src={data.src}
                        height={217}
                        width={392}
                    />
                </Link>
            </CustomLoading>
            <div className='p-[12px] md:p-[14px] lg:p-[16px]'>
                <div className={loading ? 'mb-[12px] md:mb-[14px] lg:mb-[16px]' : ''}>
                    <TextLoading width={150} height={18} loading={loading}>
                        <Link href={`/blog/${data.id}`}>
                            <p className='text-[#3B3B3B] mb-[12px] md:mb-[14px] lg:mb-[16px] text-[16px] font-bold'>{data.title}</p>
                        </Link>
                    </TextLoading>
                </div>
                <div className='flex items-center justify-start gap-[35px]'>
                    <TextLoading width={100} height={18} loading={loading}>
                        <p className='text-[#9B9B9B] text-[14px] font-medium'>تاریخ انتشار: {data.date_of_release}</p>
                    </TextLoading>
                    <TextLoading width={110} height={18} loading={loading}>
                        <p className='text-[#9B9B9B] text-[14px] font-medium'>زمان مطالعه: {data.time}</p>
                    </TextLoading>
                </div>
            </div>
        </li>
    )
}

export default Article;