import React, { useState } from 'react';
import blogOne from '../../assets/images/blog-1.jpg';
import blogTwo from '../../assets/images/blog-2.jpg';
import blogThree from '../../assets/images/blog-3.jpg';
import BlogData from './../../Services/BlogData';

import Axios from 'axios';

function BlogHomeOne() {

const blogResult  = BlogData();
/*
const [blogResult,setBlogResult] = useState("");

var res = null;
   // const getWrenchBoardBlog = () => {
        Axios.get("http://10.0.0.52:5101/wp/wrenchboard/", {
            headers: { 
                'Access-Control-Allow-Origin' : '*',
                'Access-Control-Allow-Credentials':true,
                'crossorigin':true,
                'Access-Control-Allow-Methods':'GET,PUT,POST,DELETE,PATCH,OPTIONS',
              },
            responseType: "json",
          }).then((response) => {
           console.log(response);
           res = response;
           console.log("~~~~~~~~ ameye ~~~~~~~~~");
         //  setBlogResult( response !=null ? response.data.blogResult[0]["payload"]:"" );
           setBlogResult( response.data );
          // console.log(blogResultData);
        });

*/

//debugger;
//console.log("~~~~~~~~ dorcas ~~~~~~~~~");
//console.log(blogResult);

    return (
        <>
            <section className="appie-blog-area pt-90 pb-95">
                <div className="container">
                    <div className="row">
                        <div className="col-lg-12">
                            <div className="appie-section-title text-center">
                                <h3 className="appie-title">Our latest blog posts</h3>
                            </div>
                        </div>
                    </div>
                    <div className="row">
                        
                     {
                         blogResult.map(i=>{
                            var blgImg  = i.meta_value!=null?"https://blog.wrenchboard.com/wp-content/uploads/"+ i.meta_value : blogOne;
                           return (  <div className="col-lg-4 col-md-6">
                             <div
                                 className="appie-blog-item mt-30 wow animated fadeInUp"
                                 data-wow-duration="3000ms"
                                 data-wow-delay="200ms"
                             >
                                 <div className="thumb">
                                     <img src={blgImg} alt={i.post_title} />
                                 </div>
                                 <div className="content">
                                     <div className="blog-meta">
                                         <ul>
                                             <li>{i.post_date}</li>
                                         </ul>
                                     </div>
                                     <h3 className="title">
                                         <a href={i.guid}>
                                            {i.post_title}
                                         </a>
                                     </h3>
                                     <a href={i.guid}>
                                         Learn More <i className="fal fa-arrow-right" />
                                     </a>
                                 </div>
                             </div>
                         </div> );


                         })
                     }

                    </div>
                </div>
            </section>
        </>
    );
}

export default BlogHomeOne;