import { NewsCard } from '@/components/shared/cards/newsCard'
import { Slider } from '@/components/shared/slider/Slider'
import { Media, News, NewsSection } from '@/payload-types'
import { getPayload } from 'payload'
import configPromise from '@payload-config'

export const NewsSectionBlock = async ({ title, subtitle }: NewsSection) => {
  const payload = await getPayload({ config: configPromise })

  const result = await payload.find({
    collection: 'news',
    limit: 1000,
    pagination: false,
    depth: 2,
  })

  const docs = result.docs as News[]

  return (
    <section className="w-full pl-4 md:pl-16 lg:pl-32 py-30 overflow-hidden bg-base-white">
      <div className="h2 text-base-black">{title}</div>
      <div className="b2-regular text-grey-400">{subtitle}</div>

      <Slider
        itemWidth={340}
        items={docs.map((doc) => (
          <NewsCard
            text={doc.subtitle}
            title={doc.title}
            image={doc.image as Media}
            key={doc.id}
            id={doc.id}
          />
        ))}
        gap={16}
      />
    </section>
  )
}
