import { FC } from 'react'
import Image from 'next/image'
import { ArrowLeft, Calendar2, Profile } from 'iconsax-react'
import { Blog } from '../types/BlogTypes'
import { toJalaliDate } from '@/config/func'
import Link from 'next/link'

interface BigBlogItemProps {
    item: Blog
}

const BigBlogItem: FC<BigBlogItemProps> = ({ item }) => {
    return (
        <div className='w-full rounded-4xl bg-white p-7 flex xl:flex-row flex-col gap-6'>
            <Image src={item.imageUrl} alt='blog' width={300} height={300} className='size-[150px] object-cover mx-auto xl:mx-0 rounded-4xl' />
            <div className='flex-1'>
                <h4 className='font-bold text-sm leading-6'>
                    {item.title}
                </h4>

                <div className='mt-3 flex gap-3 text-xs'>
                    <div className='flex text-[#7D818C] items-center gap-1'>
                        <Profile
                            size={18}
                            color='#7D818C'
                        />
                        <h6 className='text-sm'>
                            {item.author.firstName} {item.author.lastName}
                        </h6>
                    </div>
                    <div className='flex text-[#7D818C] items-center gap-1'>
                        <Calendar2
                            size={18}
                            color='#7D818C'
                        />
                        <h6 className='text-sm'>
                            {toJalaliDate(item.createdAt)}
                        </h6>
                    </div>
                </div>

                <div className='mt-3 text-sm leading-5'>
                    {item.previewContent.replace(/<\/?[^>]+(>|$)/g, "")}
                </div>

                <Link href={`/blogs/${item.id}`}>
                    <div className='mt-3 flex gap-1 text-sm text-[#8C90A3]'>
                        <div>ادامه ی مطلب</div>
                        <ArrowLeft
                            size={18}
                            color='#8C90A3'
                        />
                    </div>
                </Link>
            </div>
        </div>
    )
}

export default BigBlogItem