import { PageHeader } from '@/compositions/PageHeader/PageHeader'
import { fetchBlogPosts } from '@/fetch/blog'
import { BlogExcerpt } from '@/components/BlogExcerpt/BlogExcerpt'
import { Section } from '@/components/Section/Section'
import { Container } from '@/components/Container/Container'
import { getPhoto } from '@/utils/dto/gallery'

export const dynamic = 'force-dynamic'

export default async function Page() {
  const blogs = await fetchBlogPosts(false);

  return (
    <>
      <PageHeader
        title={"Aktuelle Nachrichten"}
        description={"Im Blog der Katholischen Pfarrei Heilige Drei Könige finden Sie aktuelle Nachrichten und erfahren alles über das Gemeindeleben, kommende Veranstaltungen und besondere Gottesdienste."}
      />

      <Section padding={"small"}>
        <Container>
          {
            blogs?.docs.map(blog =>
              <BlogExcerpt
                key={blog.id}
                id={blog.id}
                title={blog.title}
                excerpt={blog.content.excerpt}
                photo={getPhoto('thumbnail', blog.photo)}
              />)
          }
        </Container>
      </Section>
    </>
  )
}