import { ArrowLeft } from 'iconsax-react'
import Image from 'next/image'
import { FC } from 'react'

const BlogCard: FC = () => {
    return (
        <div className='bg-white p-3 rounded-2xl shadow w-full '>
            <Image
                src='https://picsum.photos/200/300?grayscale'
                width={357}
                height={201}
                alt=''
                className='max-w-full max-h-[181px] object-cover rounded-2xl'
            />

            <div className='mt-3'>
                <h6 className='text-primary text-sm'>تکنولوژی</h6>
            </div>
            <h4 className='mt-2'>
                نسل جدید پردازنده اینتل
            </h4>

            <p className='mt-2 text-sm text-[#7F7F7F] font-light leading-6'>
                لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است....
            </p>

            <div className='mt-6 flex justify-between items-center'>
                <div className='text-sm font-light text-[#7F7F7F]'>1401/7/21</div>
                <div className='flex gap-1 items-center text-[#7F7F7F]'>
                    <div className='text-sm font-light'>ادامه مطلب</div>
                    <ArrowLeft size={16} color='#7F7F7F' />
                </div>
            </div>
        </div>
    )
}

export default BlogCard