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

import { useEffect, useState } from "react"

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

import UserDashboardLayout from "@/layouts/user_dashboard_layout"

import Back from "@/components/shared/Back"

import { formatDate } from "@/lib/utils/format-date"

import blogImg from "../../../../images/blog-img.jpg"

const NewsPageSkeleton = () => {
  return (
    <div className={styles.blog}>
      <div className={styles.blog__container}>
        <div className={styles.skeletonBack} />

        <div className={styles.blog__hero}>
          <div className={styles.skeletonBadge} />

          <div className={styles.skeletonTitle} />

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

        <div className={styles.skeletonImage} />

        <div className={styles.blog__content}>
          {Array.from({ length: 12 }).map(
            (_, index) => (
              <div
                key={index}
                className={
                  styles.skeletonLine
                }
              />
            )
          )}
        </div>
      </div>
    </div>
  )
}

const NewsPage = ({
  publication,
}: any) => {
  const [loading, setLoading] =
    useState(true)

  const {
    title,
    body,
    category,
    created_at,
    thumbnail,
  } = publication

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

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

  if (loading) {
    return <NewsPageSkeleton />
  }

  return (
    <div className={styles.blog}>
      <div
        className={styles.blog__container}
      >
        <Back route="dashboard/blogs" />

        <header
          className={styles.blog__hero}
        >
          <span
            className={
              styles.blog__badge
            }
          >
            {category}
          </span>

          <h1>{title}</h1>

          <div
            className={
              styles.blog__meta
            }
          >
            Published on{" "}
            {formatDate(created_at)}
          </div>
        </header>

        <div
          className={styles.blog__cover}
        >
          <div
            className={
              styles.blog__coverGlow
            }
          />

          <img
            src={
              thumbnail ||
              blogImg
            }
            alt={title}
            onError={(e) => {
              e.currentTarget.src =
                blogImg
            }}
          />
        </div>

        <article
          className={
            styles.blog__content
          }
        >
          {body
            ?.split("\n")
            ?.filter(
              (paragraph: string) =>
                paragraph.trim()
            )
            ?.map(
              (
                paragraph: string,
                index: number
              ) => (
                <p key={index}>
                  {paragraph}
                </p>
              )
            )}
        </article>
      </div>
    </div>
  )
}

NewsPage.layout = (
  page: React.ReactNode
) => (
  <UserDashboardLayout
    title="Blogs & Publications"
  >
    {page}
  </UserDashboardLayout>
)

export default NewsPage