/* eslint-disable @typescript-eslint/no-explicit-any */
import styles from './blogs-page.module.scss'
import UserDashboardLayout from '@/layouts/user_dashboard_layout'
import PageIntro from '@/components/dashboard/PageIntro'
import BlogsComponent from '@/components/dashboard/BlogsComponent'
import { useState } from 'react'
import MarketNews from '@/components/dashboard/MarketNews'

  const Blogs = ({ publications }: any) => {

  const [toggleActive, setTogglActive] = useState(1);

  const toggleActiveState = (key : number) => setTogglActive(key);
  
  return (
    <div className={styles['blogs__page']}>
        <PageIntro title={"Blogs and Updates"} description={"Always stay updated on our operations and processes with our blogs and updates"}/>
        <div className={styles['blogs__page__tab']}>
          <div
            onClick={() => toggleActiveState(1)}
            className={
              toggleActive === 1
                ? styles['blogs__page__tab--item--active']
                : styles['blogs__page__tab--item']
            }
          >
            Market News
          </div>

          <div
            onClick={() => toggleActiveState(2)}
            className={
              toggleActive === 2
                ? styles['blogs__page__tab--item--active']
                : styles['blogs__page__tab--item']
            }
          >
            Blogs & Updates
          </div>
        </div>
        
        { toggleActive === 1 ? <MarketNews /> : null } 

        { toggleActive === 2 ? <BlogsComponent blogs={ publications } /> : null } 
    </div>
  )
}

Blogs.layout = (page: any) => <UserDashboardLayout children={page} title="News and Updates" />

export default Blogs