import React from 'react'

import type { Post } from '@/payload-types'

import { PostsCollectionArchive } from '@/components/PostsCollectionArchive'

export const RelatedPosts: React.FC<{
  posts: Post[]
}> = ({ posts }) => {
  if (!posts.length) {
    return null
  }

  return (
    <section className="pt-16">
      <div className="container mb-8">
        <div className="max-w-3xl">
          <p className="text-xs uppercase tracking-[0.16em] text-muted-foreground">
            Continue reading
          </p>
          <h2 className="mt-3 text-3xl md:text-4xl">Artikel terkait</h2>
        </div>
      </div>

      <PostsCollectionArchive posts={posts} />
    </section>
  )
}