import { ArrowLeft } from 'iconsax-react'
import Image from 'next/image'
import Link from 'next/link'
import { FC } from 'react'
import { Blog } from '@/app/blogs/types/Types'
import { PRIMARY_COLOR } from '@/config/const'
import moment from 'moment-jalaali'

interface BlogCardProps {
    blog?: Blog;
    isLoading?: boolean;
}

const BlogCard: FC<BlogCardProps> = ({ blog, isLoading = false }) => {
    if (isLoading) {
        return (
            <div className='bg-white p-3 rounded-2xl shadow w-full overflow-hidden animate-pulse h-full flex flex-col'>
                <div className='w-full h-[120px] sm:h-[181px] bg-gray-200 rounded-xl sm:rounded-2xl'></div>
                <div className='mt-3 h-4 w-16 bg-gray-200 rounded'></div>
                <div className='mt-2 h-5 w-full bg-gray-200 rounded'></div>
                <div className='mt-2 h-4 w-3/4 bg-gray-200 rounded flex-1'></div>
                <div className='mt-4 sm:mt-6 flex justify-between items-center'>
                    <div className='h-3 w-16 bg-gray-200 rounded'></div>
                    <div className='h-3 w-20 bg-gray-200 rounded'></div>
                </div>
            </div>
        )
    }

    if (!blog) return null;

    return (
        <Link href={`/blogs/${blog._id}`}>
            <div className='bg-white p-3 rounded-2xl shadow w-full overflow-hidden hover:shadow-lg transition-shadow cursor-pointer h-full flex flex-col'>
                <Image
                    src={blog.imageUrl || 'https://picsum.photos/200/300?grayscale'}
                    width={357}
                    height={201}
                    alt={blog.title_fa}
                    className='w-full h-[120px] sm:h-[181px] object-cover rounded-xl sm:rounded-2xl'
                />

                <div className='mt-3'>
                    <h6 className='text-primary text-sm'>{blog.category?.title_fa || 'عمومی'}</h6>
                </div>
                <h4 className='mt-2 text-sm sm:text-base line-clamp-2'>
                    {blog.title_fa}
                </h4>

                <p className='mt-2 text-xs sm:text-sm text-[#7F7F7F] font-light leading-5 sm:leading-6 line-clamp-2 flex-1'>
                    {blog.description}
                </p>

                <div className='mt-4 sm:mt-6 flex justify-between items-center'>
                    <div className='text-xs sm:text-sm font-light text-[#7F7F7F]'>
                        {moment(blog.createdAt, 'jYYYY/jMM/jDD HH:mm:ss').format('jYYYY-jMM-jDD')}
                    </div>
                    <div className='flex gap-1 items-center text-primary hover:text-primary transition-colors'>
                        <div className='text-xs sm:text-sm font-light'>ادامه مطلب</div>
                        <ArrowLeft size={14} color={PRIMARY_COLOR} className='sm:w-4 sm:h-4' />
                    </div>
                </div>
            </div>
        </Link>
    )
}

export default BlogCard