'use client'
import { FC } from 'react'
import HeroSection from './HeroSection'
import Category from './Category'
import BigBlogItem from './BigBlogItem'
import MostVisited from './MostVisited'
import ContactUs from './ContactUs'
import { useGetBlogs } from '../hooks/useBlogsData'
import { useBlogStore } from '../store/BlogStore'
const BlogList: FC = () => {

    const { selectedCategory } = useBlogStore()
    const { data } = useGetBlogs(selectedCategory)

    return (
        <div className=''>
            <HeroSection />

            <h1 className='text-2xl font-bold mt-10'>
                مجله داناک
            </h1>

            <div className='mt-10 flex xl:flex-row flex-col gap-8'>
                <div className='xl:w-[261px] w-full'>
                    <Category />
                </div>

                <div className='flex-1 flex flex-col gap-8'>
                    {data?.data.blogs.map((item) => (
                        <BigBlogItem key={item.id} item={item} />
                    ))}
                </div>

                <div className='xl:w-[261px] w-full'>
                    <MostVisited />
                    <div className='mt-6'>
                        <ContactUs />
                    </div>
                    <div className='mt-6'>
                        <MostVisited />
                    </div>
                </div>
            </div>
        </div>
    )
}

export default BlogList