import React from 'react';
import BlogData from '../../Services/BlogData';
import blogOne from '../../assets/images/blog/1.jpg';

function Blogs() {

    const BlogDataResult = BlogData();

    return (
        <>
            <div className="row">


                {
                    BlogDataResult.map(i => {
                        var options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
                        var postDt  = new Date(i.post_date).toLocaleDateString("en-US", options);
                        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>{postDt}</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>

        </>
    );
}

export default Blogs;