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

import { useEffect, useState } from "react"
import { FaArrowRightLong } from "react-icons/fa6"

import styles from "./crypto-card.module.scss"

import fallbackImg from "../../../../../../public/chart-img2.avif";

const CryptoCard = ({ update }: any) => {
  const {
    title,
    pubDate,
    image_url,
    link,
  } = update

  const [imgSrc, setImgSrc] =
    useState(fallbackImg)

  useEffect(() => {
    if (!image_url) return

    const img = new Image()

    img.src = image_url

    img.onload = () =>
      setImgSrc(image_url)

    img.onerror = () =>
      setImgSrc(fallbackImg)
  }, [image_url])

  return (
    <article
      className={styles.newsCard}
    >
      <div
        className={styles.newsCard__image}
      >
        <img
          src={imgSrc}
          alt={title}
        />

        <div
          className={
            styles.newsCard__overlay
          }
        />

        <span
          className={
            styles.newsCard__tag
          }
        >
          Crypto News
        </span>
      </div>

      <div
        className={styles.newsCard__body}
      >
        <small
          className={
            styles.newsCard__date
          }
        >
          {pubDate}
        </small>

        <h3>{title}</h3>

        <a
          href={link}
          target="_blank"
          rel="noopener noreferrer"
          className={
            styles.newsCard__link
          }
        >
          Read Article

          <FaArrowRightLong />
        </a>
      </div>
    </article>
  )
}

export default CryptoCard