import { PRIMARY_COLOR } from '@/config/const'
import { ArrowLeft } from 'iconsax-react'
import Image from 'next/image'
import Link from 'next/link'
import React from 'react'
import { Blog } from '../types/Types'

interface BlogItemProps {
    blog: Blog
}

const BlogItem: React.FC<BlogItemProps> = ({ blog }) => {
    return (
        <div className=' flex flex-col sm:flex-row gap-4 sm:gap-6'>
            <Image
                width={200}
                height={160}
                src={blog.imageUrl || 'https://picsum.photos/200/160'}
                className='w-full sm:max-w-[200px] sm:max-h-[160px] h-48 sm:h-auto object-cover sm:object-contain'
                alt={blog.title_fa}
            />

            <div className='flex-1'>
                <h6 className='font-bold text-base sm:text-lg'>
                    {blog.title_fa}
                </h6>

                <p className='mt-3 sm:mt-4 text-sm line-clamp-2 sm:line-clamp-3 text-[#7F7F7F] leading-6 sm:leading-7'>
                    {blog.description}
                </p>

                <Link href={`/blogs/${blog._id}`}>
                    <div className='flex mt-3 sm:mt-4 text-primary gap-1.5 items-center text-sm cursor-pointer'>
                        <div className='text-sm'>
                            ادامه مطلب
                        </div>
                        <ArrowLeft size={18} color={PRIMARY_COLOR} />
                    </div>
                </Link>
            </div>
        </div>
    )
}

export default BlogItem