import { get } from '@/api1/apiUtils';
import { ArticleItem } from '@/components/cards/BlogCard';
import LayoutWrapper from '@/components/Layout/LayOutWrapper';
import { useEffect, useState } from 'react';


const BlogListComp = () => {

    const [blogList, setBlogList] = useState([]);
    const [perPage, setPerPage] = useState(12);
    const [total, setTotal] = useState(50)

    async function fetchBlogList() {
        try {
            const res = await get('/blogs?page=1', { per_page: perPage }) as any
            setBlogList(res?.blogs)
            setTotal(res?.total)
            //console.log(res)
        } catch (error) {
            setBlogList([])
            console.log(error)
        }
    }

    useEffect(() => {
        fetchBlogList();

    }, [])


    return (
        <LayoutWrapper>
            <h1 className='mt-3'>All Blogs List</h1>
            <div className="col-md-12 mt-4 detail-dktp">
                <div className="row row-gap-4">
                    {blogList?.length > 0 &&
                        blogList.map((post: any) => {

                            return (

                                <div className='col-12 col-md-4 col-lg-3' key={post?.id}>
                                    <ArticleItem post={post} />
                                </div>

                            );
                        })}

                </div>
                {total > perPage && <button className="rental-frm-btns more-btn-blog" onClick={() => {
                    setPerPage(perPage + 10);
                    fetchBlogList()
                }}>
                    More Blogs
                </button>
                }

            </div>
        </LayoutWrapper>
    )
}

export default BlogListComp