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

import { useEffect, useState } from "react"
import axios from "axios"

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

import CryptoCard from "../CryptoNews/CryptoCard"
import NoResults from "../NoResults"

const SkeletonCard = () => {
  return (
    <div className={styles.skeletonCard}>
      <div
        className={
          styles.skeletonCard__image
        }
      />

      <div
        className={
          styles.skeletonCard__body
        }
      >
        <div
          className={
            styles.skeletonCard__tag
          }
        />

        <div
          className={
            styles.skeletonCard__date
          }
        />

        <div
          className={
            styles.skeletonCard__title
          }
        />

        <div
          className={
            styles.skeletonCard__titleShort
          }
        />

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

const MarketNews = () => {
  const [news, setNews] = useState<any[]>(
    []
  )

  const [loading, setLoading] =
    useState(true)

  const API_KEY =
    "pub_79818e2290a1a4b2c339f64fa177647f9d1f6"

  useEffect(() => {
    const fetchNews = async () => {
      try {
        const response =
          await axios.get(
            `https://newsdata.io/api/1/news?apikey=${API_KEY}&q=crypto&language=en`
          )

        setNews(
          response.data.results || []
        )
      } catch (error) {
        console.error(error)

        setNews([])
      } finally {
        setLoading(false)
      }
    }

    fetchNews()
  }, [])

  return (
    <div className={styles.news}>
      {loading ? (
        <div
          className={
            styles.news__grid
          }
        >
          {Array.from({
            length: 6,
          }).map((_, index) => (
            <SkeletonCard
              key={index}
            />
          ))}
        </div>
      ) : news.length === 0 ? (
        <NoResults
          title="No Market News"
          description="There are currently no market updates available."
        />
      ) : (
        <div
          className={
            styles.news__grid
          }
        >
          {news.map(
            (update: any) => (
              <CryptoCard
                key={
                  update.article_id
                }
                update={update}
              />
            )
          )}
        </div>
      )}
    </div>
  )
}

export default MarketNews