import BLOG from '@/blog.config'
import { useGlobal } from '@/lib/global'
// import Image from 'next/image'
import Link from 'next/link'
import { useRouter } from 'next/router'

/**
 * 最新文章列表
 * @param posts 所有文章数据
 * @param sliceCount 截取展示的数量 默认6
 * @constructor
 */
const LatestPostsGroup = ({ latestPosts, siteInfo }) => {
  // 获取当前路径
  const currentPath = useRouter().asPath
  const { locale } = useGlobal()

  if (!latestPosts) {
    return <></>
  }

  return <>
        <div className=" mb-2 px-1 flex flex-nowrap justify-between">
            <div>
                <i className="mr-2 fas fas fa-history" />
                {locale.COMMON.LATEST_POSTS}
            </div>
        </div>
        {latestPosts.map(post => {
          const selected = currentPath === `${BLOG.SUB_PATH}/${post.slug}`

          const headerImage = post?.page_cover ? post.page_cover : siteInfo?.pageCover

          return (
            (<Link
                    key={post.id}
                    title={post.title}
                    href={`${BLOG.SUB_PATH}/${post.slug}`}
                    passHref
                    className={'my-2 flex'}>

                    <div className="w-20 h-16 overflow-hidden relative">
                          {/* <Image
                            src={headerImage}
                            fill
                            style={{ objectFit: 'cover' }}
                            placeholder='blur'
                            blurDataURL='/bg_image.jpg'
                            quality={10}
                            alt={post.title} /> */}
                            {/* eslint-disable-next-line @next/next/no-img-element */}
                            <img src={headerImage} className='object-cover w-full h-full'/>
                    </div>
                    <div
                        className={
                            (selected ? ' text-indigo-400 ' : 'dark:text-gray-400 ') +
                            ' text-sm overflow-x-hidden hover:text-indigo-600 px-2 duration-200 w-full rounded ' +
                            ' hover:text-indigo-400 cursor-pointer items-center flex'
                        }
                    >
                        <div>
                            <div className='text-line-2'>{post.title}</div>
                            <div className="text-gray-500">{post.lastEditedTime}</div>
                        </div>
                    </div>

                </Link>)
          )
        })}
    </>
}
export default LatestPostsGroup