import BlogItem from '@/components/BlogItem'
import SectionHeader from '@/components/SectionHeader'
import { FC } from 'react'
import { useGetLanding } from './hooks/useHomeData'

const Blog: FC = () => {

    const { data } = useGetLanding()
    return (
        <div className='xl:mt-24 mt-14 max-w-maxWidth mx-auto'>
            <SectionHeader
                title='مجله داناک'
                link='/blogs'
            />

            <div className='flex xl:flex-row flex-col gap-8 xl:mt-16 mt-10 items-center'>
                {
                    data?.data?.pinnedBlogs?.map((item, index: number) => {
                        if (index < 3)
                            return (
                                <BlogItem key={item.id} item={item} />
                            )
                    })
                }

            </div>
        </div>
    )
}

export default Blog