import { usePostContext } from '@/context/PostContext'
import { Card } from './Card'
import Pagination from './Pagination'

export function CardList({ page, cat, count }: any) {
  // const [dataCards, setDataCards] = useState<Post[]>([])
  // const [countN, setCount] = useState<number>(count)
  const { postData, updatePostData } = usePostContext()

  // const getData = async (page: any, cat: any) => {
  //   console.log('funciona')

  //   try {
  //     const response = await fetch(`http://localhost:3000/api/posts?page=${page || 1}&cat=${cat || ''}`, {
  //       cache: 'no-store'
  //     })
  //     console.log(response)

  //     if (!response.ok) {
  //       throw new Error('Failed')
  //     }
  //     const result = await response.json()
  //     updatePostData(result.posts)
  //     // setCount(result.count)
  //   } catch (error) {
  //     console.error(error)
  //   }
  // }
  // useEffect(() => {
  //   getData(page, cat)
  // }, [page, cat])

  // NO LO TENGO MUY CLARO PERO CREO QUE ESTO NO ME HACE FALTA, TENGO QUE REVISARLO CON CALMA

  const POST_PER_PAGE = 4
  const hasPrev = POST_PER_PAGE * (page - 1) > 0
  const hasNext = POST_PER_PAGE * (page - 1) + POST_PER_PAGE < count
  return (
    <>
      <div className="flex flex-col ">
        {Array.isArray(postData) && postData?.map((item) => <Card {...item} post={item} key={item.id} />)}
      </div>
      <div className="py-4">
        <Pagination page={page} hasPrev={hasPrev} hasNext={hasNext} />
      </div>
    </>
  )
}