import React from 'react'
import { useLocation } from 'react-router-dom'
// import SiteService from '../svs/SiteService';

const BlogItems = ({blogData}) => {

    let location = useLocation().pathname
    // const [blogData, setBlogData] = useState({}) // for holding blogs
    // console.log(blogData.payload)
	// const blogApi = new SiteService(); // instantiating the API SERVICE
	// const getBlogData = async () => {
	// 	try {
	// 		const res = await blogApi.blogData();
	// 		if(res.status == 200 /* && res.data.status > 0*/){
	// 			console.log('blogitem',res.data.payload, res.data);
	// 			setBlogData(res.data)
	// 			return
	// 		}
	// 	}catch(error) {
	// 	}
	// };

	// useEffect(() => {
	// 	getBlogData();
	// }, []);

  return (
    <div className="row">
        {
            blogData?.blogdata == undefined ? // API CALL IN PROGRESS
            // <div className='col-12 text-center display-4'>Loading...</div>
            <div className="col-12 text-center">
                <div className="spinner-border spinner-border-lg" role="status" style={{width: '3rem', height: '3rem'}}>
                </div>
            </div>
            :
            // API CALL FINISHED
            (
                blogData?.blogdata.length < 1 ?
                <div className='col-12 text-center display-4'>No Blog Currently Found!</div>
                :
                blogData?.blogdata.map((blog, index) => {
                    if(location == '/blogs'){
                        return(
                            <div key={index} id="b-post-1" className="col-md-6 col-lg-4">
                                <div className="blog-post mb-40 wow fadeInUp" data-wow-delay="0.4s">
                                {/* BLOG POST IMAGE */}
                                <div className="blog-post-img rounded">
                                    {/* <img className="img-fluid rounded" src="assets/images/blog/post-1-img.jpg" alt="blog-post-image" /> */}
                                    <img className="img-fluid rounded" src={process.env.REACT_APP_IMAGE_LINK + blog.meta_value} alt="blog-post-image" />
                                </div>
                                {/* BLOG POST TEXT */}
                                <div className="blog-post-txt">
                                    {/* Post Tag */}
                                    <p className="p-md post-tag">Float News</p>
                                    {/* Post Link */}
                                    <h5 className="h5-sm">
                                    <a href="/sel_post/">{blog.post_title.substring(0,40)+'  . . .'}</a>
                                    </h5>
                                    {/* Text */}
                                    <div dangerouslySetInnerHTML={{__html: blog.post_content.substring(0,50)+'  . . .'}}></div>
                                    {/* <p className="p-md">Aliqum mullam blandit vitae tempor sapien a donec lipsum gravida porta velna dolor vitae auctor
                                    congue
                                    </p> */}
                                    {/* Post Meta */}
                                    <div className="post-meta">
                                    <div className="post-author-avatar"><img src="assets/images/post-author-1.jpg" alt="author-avatar" /></div>
                                    <p>12 min read</p>
                                    </div>
                                </div>
                                </div>
                            </div>
                        )
                    }else if (location != 'blogs' && index <= 5) {
                        return (
                            <div key={index} id="b-post-1" className="col-md-6 col-lg-4">
                                <div className="blog-post mb-40 wow fadeInUp" data-wow-delay="0.4s">
                                {/* BLOG POST IMAGE */}
                                <div className="blog-post-img rounded">
                                    {/* <img className="img-fluid rounded" src="assets/images/blog/post-1-img.jpg" alt="blog-post-image" /> */}
                                    <img className="img-fluid rounded" src={process.env.REACT_APP_IMAGE_LINK + blog.meta_value} alt="blog-post-image" />
                                </div>
                                {/* BLOG POST TEXT */}
                                <div className="blog-post-txt">
                                    {/* Post Tag */}
                                    <p className="p-md post-tag">Float News</p>
                                    {/* Post Link */}
                                    <h5 className="h5-sm">
                                    <a href="/sel_post">{blog.post_title.substring(0,40)+'  . . .'}</a>
                                    </h5>
                                    {/* Text */}
                                    <div dangerouslySetInnerHTML={{__html: blog.post_content.substring(0,50)+'  . . .'}}></div>
                                    {/* <p className="p-md">Aliqum mullam blandit vitae tempor sapien a donec lipsum gravida porta velna dolor vitae auctor
                                    congue
                                    </p> */}
                                    {/* Post Meta */}
                                    <div className="post-meta">
                                    <div className="post-author-avatar"><img src="assets/images/post-author-1.jpg" alt="author-avatar" /></div>
                                    <p>12 min read</p>
                                    </div>
                                </div>
                                </div>
                            </div>
                        )
                    }
                })
            )

        }
    </div>
  )
}

export default BlogItems