import { Link } from 'react-router-dom'

import type { FC, MouseEvent } from 'react'

import type { Post } from '@/types'

type Props = { posts:     Post[]
	       onClick?:  (event: MouseEvent<HTMLElement>) => void }


export default (({ posts, onClick }: Props) => (
    <div className="flex flex-wrap gap-6 p-4">
      {posts.map ((post, i) => (
	  <Link to={`/posts/${ post.id }`}
		key={post.id}
		className="w-40 h-40 overflow-hidden rounded-lg shadow-md hover:shadow-lg"
		onClick={onClick}>
	    <img src={post.thumbnail || post.thumbnailBase || undefined}
		 alt={post.title || post.url}
		 title={post.title || post.url || undefined}
		 loading={i < 12 ? 'eager' : 'lazy'}
		 decoding="async"
		 className="object-cover w-full h-full"/>
	  </Link>))}
    </div>)) satisfies FC<Props>