import React from 'react';
import Link from 'next/link';
import BlogSidebar from '../BlogSidebar/BlogSidebar.js';
import VideoModal from '../ModalVideo/VideoModal';
import blogs from '../../api/blogs';
import Image from 'next/image.js';

const ClickHandler = () => {
    window.scrollTo(10, 0);
};

const BlogList = (props) => {
    return (
        <section className="wpo-blog-pg-section section-padding">
            <div className="container">
                <div className="row">
                    <div className={`col col-lg-12 ${props.blRight}`}>
                        <div className="wpo-blog-content">
                            <div className="row">
                                {blogs.map((blog, bitem) => (
                                    <div className="col-lg-4 col-md-6 col-12" key={bitem}>
                                        <div className={`post ${blog.blClass}`}>
                                            <div className="entry-media">
                                                <Image src={blog.blogSingleImg} alt="" />
                                                {/* <VideoModal /> */}
                                            </div>
                                            <div className="entry-meta">
                                                <ul>
                                                    {/* <li><i className="fi flaticon-comment-white-oval-bubble"></i> Comments {blog.comment} </li> */}
                                                    <li>
                                                        <i className="fi flaticon-calendar"></i> {blog.create_at}
                                                    </li>
                                                    <li>
                                                        <i className="fi flaticon-user"></i>
                                                        <Link onClick={ClickHandler} href={'/blog-single/[slug]'} as={`/blog-single/${blog.slug}`}>
                                                            {blog.authorTitle}
                                                        </Link>
                                                    </li>
                                                </ul>
                                            </div>
                                            <div className="entry-details">
                                                <h3 style={{
                                                    whiteSpace: 'nowrap',
                                                    overflow: 'hidden',
                                                    textOverflow: 'ellipsis',
                                                    width: '100%',
                                                    display: 'block',
                                                }}>
                                                    <Link onClick={ClickHandler} href={'/blog-single/[slug]'} as={`/blog-single/${blog.slug}`}>
                                                        {blog.title}
                                                    </Link>
                                                </h3>
                                                <p>
                                                    {blog.para}
                                                </p>
                                                <Link onClick={ClickHandler} href={'/blog-single/[slug]'} as={`/blog-single/${blog.slug}`} className="read-more">
                                                   Continue Reading
                                                </Link>
                                            </div>
                                        </div>
                                    </div>
                                ))}
                            </div>

                            {/* <div className="pagination-wrapper pagination-wrapper-left">
                                <ul className="pg-pagination">
                                    <li>
                                        <Link href="/blog-left-sidebar" aria-label="Previous">
                                            <i className="fi ti-angle-left"></i>
                                        </Link>
                                    </li>
                                    <li className="active"><Link href="/blog-left-sidebar">1</Link></li>
                                    <li><Link href="/blog-left-sidebar">2</Link></li>
                                    <li><Link href="/blog-left-sidebar">3</Link></li>
                                    <li>
                                        <Link href="/blog-left-sidebar" aria-label="Next">
                                            <i className="fi ti-angle-right"></i>
                                        </Link>
                                    </li>
                                </ul>
                            </div> */}
                        </div>
                    </div>
                    {/* <BlogSidebar blLeft={props.blLeft}/> */}
                </div>
            </div>
        </section>
    );
};

export default BlogList;