import { mdxComponents } from '../posts-edge'
import Link from 'next/link'
import { MDXRemote } from 'next-mdx-remote'
import styles from './index.module.scss'

export default function LatestPosts({ posts }) {
  return (
    <div className={styles.container}>
      <ul className={styles.postsList}>
        {posts.map((post) => (
          <li className={styles.post} key={post.slug}>
            <div>
              <Link href={`/posts/${encodeURIComponent(post.slug)}`}>
                <a>
                  <h3 className={styles.postHeader}>{post.title}</h3>
                </a>
              </Link>
              <time className={styles.postTimestamp}>{post.date.toString()}</time>
              <div className={styles.postBlurb}><MDXRemote {...post.excerptMdx} components={mdxComponents} /></div>
              <Link href={`/posts/${encodeURIComponent(post.slug)}`}>
                <a className={styles.postReadMoreButtonLink}>
                  <span role="button" className={styles.postReadMoreButton}>Read More →</span>
                </a>
              </Link>
            </div>
          </li>
        ))}
      </ul>
    </div>
  )
}