import { Blog } from '@/app/blogs/types/BlogTypes'
import Image from 'next/image'
import Link from 'next/link'
import { FC } from 'react'

interface Props {
    item: Blog
}

const BlogItem: FC<Props> = ({ item }) => {
    return (
        <Link href={`/blogs/${item.slug}`} className='flex-1 w-full min-h-[390px] rounded-4xl overflow-hidden relative'>
            <Image
                src={item.imageUrl}
                layout='fill'
                objectFit='cover'
                alt='blog'
            />

            <div className='absolute top-6 left-6 bg-black text-white h-8 px-5 rounded-xl flex items-center text-sm'>
                {item.category?.title}
            </div>

            <div className='absolute bottom-0 left-0 w-full modalGlass3 h-[180px]  rounded-b-3xl text-white p-6'>
                <h6 className='font-bold text-sm'>
                    {item.title}
                </h6>

                <p id='blog-preview-content' className='mt-4 text-sm text-white line-clamp-3 leading-6' dangerouslySetInnerHTML={{ __html: item.previewContent }}>
                </p>
            </div>
        </Link>
    )
}

export default BlogItem