import { get } from '@/api1/apiUtils';
import { CustomCarouselMain } from '@/views/carousel/EmblaCarousel';
import { useEffect, useState } from 'react';
import { ArticleItem } from '../cards/BlogCard';
import { useRouter } from 'next/router';

const BlogListComp = () => {

    const [blogList, setBlogList] = useState([])


    useEffect(() => {
        fetchBlogList();

        async function fetchBlogList() {
            try {
                const res = await get('/blogs?page=1&size=10') as any
                setBlogList(res?.blogs)
                //console.log(res)
            } catch (error) {
                setBlogList([])
                console.log(error)
            }
        }
    }, [])

    const router = useRouter()

    return (
        <>
            <div className="col-md-12 mt-1 detail-dktp">
                <CustomCarouselMain axis="x">
                    {blogList?.length > 0 &&
                        blogList.map((post: any, index: any) => {

                            return (

                                <ArticleItem post={post} />

                            );
                        })}
                </CustomCarouselMain>

                {blogList?.length > 0 && <button className="rental-frm-btns more-btn-blog" onClick={() => {
                    router.push('/ayodhya-blog-list')
                }}>
                    More Blogs
                </button>
                }
            </div>
        </>
    )
}

export default BlogListComp