'use client'
import { FC } from 'react'
import Link from 'next/link'
import BlogCard from './BlogCard'
import GridWrapper from '@/components/GridWrapper'
import { useGetBlogs } from '@/app/blogs/hooks/useBlogData';

const Blogs: FC = () => {

    const { data, error } = useGetBlogs(1, 5)

    if (error || !data?.results?.blogs) {
        return (
            <div>
                <h4 className='text-[#012B4D] text-lg'>رسانه و مطالب</h4>
                <div className='mt-2 flex gap-1 text-sm text-[#8C8C8C]'>
                    برای مشاهده ی آخرین مطالب رسانه و مطالب <Link href="/blogs" className='text-primary hover:underline'>اینجا کلیک کنید</Link>
                </div>
                <div className='mt-10'>
                    <div className='text-center text-gray-500'>خطا در بارگذاری مطالب</div>
                </div>
            </div>
        )
    }

    const blogs = data.results.blogs

    return (
        <div>
            <h4 className='text-[#012B4D] text-lg'>رسانه و مطالب</h4>
            <div className='mt-2 flex gap-1 text-sm text-[#8C8C8C]'>
                برای مشاهده ی آخرین مطالب رسانه و مطالب <Link href="/blogs" className='text-primary hover:underline'>اینجا کلیک کنید</Link>
            </div>
            <div className='mt-10'>
                <GridWrapper className='items-stretch' desktop={5} mobile={1} gapDesktop={24} gapMobile={16}>
                    {blogs.map((blog) => (
                        <BlogCard key={blog._id} blog={blog} />
                    ))}
                </GridWrapper>
            </div>
        </div>
    )
}

export default Blogs