'use client'

import { NewsCard } from '@/components/shared/cards/newsCard'
import { CustomInput } from '@/components/ui/CustomInput'
import { Pagination } from '@/components/ui/pagination'
import { Section } from '@/components/ui/section'
import ImageLoader from '@/lib/utils/ImageLoader'
import { useI18n } from '@/locales/client'
import { Media, News } from '@/payload-types'
import { Search } from 'lucide-react'
import { useState } from 'react'

export const BlogContent = ({ bg, title, news }: { bg: Media; title: string; news: News[] }) => {
  const [search, setSearch] = useState('')
  const [filteredNews, setFilteredNews] = useState<News[]>(news)

  const handleSearch = (val: string) => {
    setSearch(val)
    setFilteredNews(news.filter((n) => n.title.toLowerCase().includes(val.toLowerCase())))
  }
const t = useI18n()
  return (
    <>
      <div className="relative w-full max-h-[460px]">
        {bg && <div className="relative w-full h-[460px] overflow-hidden">
          <ImageLoader media={bg} className="w-full h-[460px] object-cover" />
          <div className="absolute bottom-0 left-0 w-full h-[210px] bg-gradient-to-b from-transparent to-black pointer-events-none z-10" />

        </div>
        }
        <div className="absolute bottom-0 w-full translate-y-1/2 z-10">
          <Section>
            <div className="relative rounded-xl p-[1px] bg-gradient-to-b from-[#3b3b3b] to-black">
              <div className="rounded-xl bg-black p-6 flex items-start md:items-center justify-between flex-col md:flex-row gap-y-4">
                <div className="h4 md:h1 text-base-white">{title}</div>
                <CustomInput
                  value={search}
                  onChange={(e) => handleSearch(e.target.value)}
                  className="w-[246px] md:w-[351px]"
                  iconLeft={<Search size={20} className="stroke-grey-200" />}
                  placeholder={`${t('catalog.labels.search')}...`}
                />
              </div>
            </div>
          </Section>
        </div>
      </div>
      <Section boxClass="mx-auto" sectionClass="pt-40 pb-30 flex gap-4 flex-wrap">
        {filteredNews.length > 0 && (
          <Pagination
            items={filteredNews.map((doc) => (
              <NewsCard
                text={doc.subtitle}
                title={doc.title}
                image={doc.image as Media}
                className="text-base-white"
                key={doc.id}
                id={doc.id}
              />
            ))}
            countPerPage={9}
            gridSize={{ md: 2, lg: 3 }}
          />
        )}
      </Section>
    </>
  )
}
