import Image from 'next/image'
import Link from 'next/link'
import React from 'react'
import { Blog } from '../types/Types'

interface MiniBlogItemProps {
    blog: Blog
}

const MiniBlogItem: React.FC<MiniBlogItemProps> = ({ blog }) => {
    return (
        <Link href={`/blogs/${blog._id}`} className='block'>
            <div className='flex gap-3 sm:gap-4 mt-4 sm:mt-6'>
                <Image
                    width={123}
                    height={123}
                    src={blog.imageUrl || 'https://picsum.photos/123/123'}
                    alt={blog.title_fa}
                    className='w-20 h-20 sm:max-w-[100px] sm:max-h-[100px] object-cover sm:object-contain flex-shrink-0'
                />

                <div className='flex-1 min-w-0'>
                    <h6 className='text-sm font-bold leading-5'>
                        {blog.title_fa}
                    </h6>

                    <p className='mt-2 sm:mt-3 text-xs text-[#7F7F7F] line-clamp-2 leading-5'>
                        {blog.description}
                    </p>
                </div>
            </div>
        </Link>
    )
}

export default MiniBlogItem