import Image from 'next/image'
import { FC } from 'react'
import { Blog } from '../types/BlogTypes'
import Link from 'next/link'
const MiniBlogItem: FC<{ item: Blog }> = ({ item }) => {
    return (
        <div className='flex items-center gap-2'>
            <Link href={`/blogs/${item.slug}`}>
                <Image
                    src={item.imageUrl}
                    alt={item.title}
                    width={72}
                    height={72}
                    className='rounded-xl size-[72px] min-w-[72px] object-cover'
                />
            </Link>

            <Link href={`/blogs/${item.slug}`}>
                <h6 className='text-xs leading-5 font-bold hover:opacity-70 transition-opacity'>
                    {item.title}
                </h6>
            </Link>
        </div>
    )
}

export default MiniBlogItem