import Image from 'next/image'
import Link from 'next/link';

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

export default Article;