import { fetchBlogPosts } from '@/fetch/blog'
import { blogToSlides } from '@/utils/dto/blog'
import { Container } from '@/components/Container/Container'
import { Section } from '@/components/Section/Section'
import { Title } from '@/components/Title/Title'
import { ImageCardSlider } from '@/compositions/ImageCardSlider/ImageCardSlider'

type BlogSliderBlockProps = {
  title?: string | null
}

export async function BlogSliderBlock({
  title = 'Aktuelles',
}: BlogSliderBlockProps) {
  const blog = await fetchBlogPosts(true)
  const posts = blog?.docs || []

  if (posts.length === 0) return null

  return (
    <Container>
      <Section>
        <Title title={title || 'Aktuelles'} color={'contrast'} />
        <ImageCardSlider slides={blogToSlides(posts)} />
      </Section>
    </Container>
  )
}