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

import { useEffect, useState } from "react"

import styles from "./news.module.scss"

import BlogItem from "../BlogItem"
import NoResults from "../NoResults"
import Pagination from "@/components/shared/Pagination"

const BlogSkeleton = () => {
  return (
    <div className={styles.blogSkeleton}>
      <div
        className={styles.blogSkeleton__image}
      />

      <div
        className={styles.blogSkeleton__body}
      >
        <div
          className={styles.blogSkeleton__meta}
        >
          {/* <div
            className={styles.blogSkeleton__chip}
          /> */}

          <div
            className={styles.blogSkeleton__date}
          />
        </div>

        <div
          className={styles.blogSkeleton__title}
        />

        <div
          className={
            styles.blogSkeleton__titleShort
          }
        />

        <div
          className={styles.blogSkeleton__text}
        />

        <div
          className={styles.blogSkeleton__text}
        />

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

interface Props {
  blogs: any
  handlePageChange?: any
}

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

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

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

  return (
    <div className={styles.news}>
      {loading ? (
        <div
          className={
            styles.news__grid
          }
        >
          {Array.from({
            length: 6,
          }).map((_, index) => (
            <BlogSkeleton
              key={index}
            />
          ))}
        </div>
      ) : blogs?.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
            }
          >
            {blogs?.data?.map(
              (blog: any) => (
                <BlogItem
                  key={blog.id}
                  blog={blog}
                />
              )
            )}
          </div>

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

export default BlogsComponent