/* eslint-disable @typescript-eslint/no-explicit-any */
import { useState, useEffect } from 'react'
import styles from './blog.module.scss'
import AdminDashboardLayout from '@/layouts/admin_layout'
import Back from '@/components/shared/Back'
import { formatDate } from '@/lib/utils/format-date'
import blogImg from "../../../../images/blog-img.jpg"
import { usePage } from '@inertiajs/react'

const NewsPageSkeleton = () => {
  return (
    <div className={styles['blog']}>
      {/* Back button skeleton */}
      <div className={styles['skeleton-back']}></div>

      <div className={styles['blog__details']}>
        {/* Category skeleton */}
        <div className={styles['skeleton-category']}></div>

        {/* Image skeleton */}
        <div className={styles['skeleton-image']}></div>

        {/* Title skeleton */}
        {/* <div className={styles['skeleton-title']}></div> */}

        {/* Meta skeleton */}
        <div className={styles['skeleton-meta']}></div>

        {/* Paragraphs */}
        <div className={styles['skeleton-paragraph']}></div>
        <div className={styles['skeleton-paragraph']}></div>
        <div className={styles['skeleton-paragraph']}></div>
        <div className={styles['skeleton-paragraph']}></div>
        <div className={styles['skeleton-paragraph']}></div>
        <div className={styles['skeleton-paragraph']}></div>
        <div className={styles['skeleton-paragraph']}></div>
        <div className={styles['skeleton-paragraph']}></div>
      </div>
    </div>
  )
}

const NewsPage = ({ publication }: any) => {
  const [loading, setLoading] = useState(true)
  const { title, body, category, created_at } = publication
  const { url } = usePage()


  useEffect(() => {
    const timer = setTimeout(() => setLoading(false), 1500)
    return () => clearTimeout(timer)
  }, [])

  if (loading) return <NewsPageSkeleton />

  return (
    <div className={styles['blog']}>
      <Back route={ url.startsWith("/admin") ? "admin/publications" : "dashboard/blogs"  }/>
      <div className={styles['blog__details']}>
        <span>{ category }</span>
        <img src={blogImg} alt="thumbnail" />
            <h1>{ title }</h1>
        <div className={styles['blog__details__meta']}>
          <p>Created: { formatDate(created_at) }</p>
        </div>
        <p>{ body }</p>
      </div>
    </div>
  )
}

NewsPage.layout = (page: React.ReactNode) => <AdminDashboardLayout children={page} title="Dashboard" />

export default NewsPage