/* eslint-disable @typescript-eslint/no-explicit-any */
"use client"

import styles from "./news.module.scss"
import BlogItem from "../BlogItem"
import NoResults from "../NoResults"
import Pagination from "@/components/shared/Pagination"

import { useState, useEffect } from "react"

interface Props {
  news: any
  handlePageChange?: any
}

const News = ({
  news,
  handlePageChange,
}: Props) => {
  const [loading, setLoading] = useState(true)


  useEffect(() => {
    const timer = setTimeout(
      () => setLoading(false),
      1500
    )

    return () => clearTimeout(timer)
  }, [])

  const skeletons = Array.from({
    length: 6,
  }).map((_, index) => (
    <div
      key={index}
      className={`${styles.blogSkeleton}`}
    >
      <div
        className={
          styles.blogSkeleton__image
        }
      />

      <div
        className={
          styles.blogSkeleton__body
        }
      >
        <div
          className={
            styles.blogSkeleton__badge
          }
        />

        <div
          className={
            styles.blogSkeleton__title
          }
        />

        <div
          className={
            styles.blogSkeleton__date
          }
        />

        <div
          className={
            styles.blogSkeleton__text
          }
        />

        <div
          className={
            styles.blogSkeleton__textShort
          }
        />
      </div>
    </div>
  ))

  return (
    <div className={styles.news}>
      {loading ? (
        <div className={styles.news__grid}>
          {skeletons}
        </div>
      ) : news?.data?.length === 0 ? (
        <NoResults
          title="No Blog Posts"
          description="Oops! It seems you are yet to create a blog post."
        />
      ) : (
        <>
          <div className={styles.news__grid}>
            {news?.data?.map(
              (singleNews: any) => (
                <BlogItem
                  key={singleNews.id}
                  blog={singleNews}
                />
              )
            )}
          </div>

          <div className={styles.pagination}>
            {news?.data?.length > 0 &&
              news?.links?.length > 0 && (
                <Pagination
                  links={news.links}
                  onChange={
                    handlePageChange
                  }
                />
              )}
          </div>
        </>
      )}
    </div>
  )
}

export default News