import React from "react";
import Link from "next/link";
import CONFIG from "../../config.json";
import SocialMedia from "./socialmedia";
import moment from 'moment';
export default function Blogs({postBlogs}) {
    const needToParse = JSON.stringify(postBlogs.data);
    const arrData = JSON.parse(JSON.parse(needToParse));
 return (
      <>
    <section className="site-hero overlay justify-content-center align-items-center" data-stellar-background-ratio="0.5">
        <div className="bg-section">
            <img src="/images/blog.jpg" alt="" title=""/>
            <h1 className="bg-text heading-employee">Blog</h1>
        </div>
        <div className="container">
            <div className="row site-hero-inner justify-content-center align-items-center">
                <div className="mouse-down">
                    <div className="chevron"></div>
                    <div className="chevron"></div>
                    <div className="chevron"></div>
                </div>
            </div>
        </div>
    </section>
    <main className="site-main">
    <section className="blog_area section-padding">
            <div className="container">
                <div className="row">
                    <div className="col-lg-8 mb-5 mb-lg-0">
                    {arrData.blogList && arrData.blogList.length > 0 &&
                        <div className="blog_left_sidebar">
                             {
                            arrData.blogList.map(blog =>(
                            <article className="blog_item" key={blog.id.toString()}>
                                <div className="blog_item_img">
                                <img className="card-img rounded-0" alt={blog.title} src={CONFIG.FILE_URL+"large/"+blog.image}/>
                                   <div className="blog_item_date">                                        
                                            <h3>{moment(blog.doe).format('DD')}</h3>
                                            <p>{moment(blog.doe).format('MMM')}</p>                                    
                                    </div>
                                </div>
                                     <div className="blog_details">
                                        <Link href={`blog/[nickname]`} as={`/blog/${blog.nickname}`}>
                                         <a className="d-inline-block">
                                           <h2>{blog.title}</h2>
                                          </a>
                                    </Link>
                                     <p className="p-text">{blog.description.slice(0, 400) + (blog.description.length > 400 ? "..." : "")}</p>
                                    {/* <ul className="blog-info-link">
                                        <li><a href="#"><i className="fa fa-user"></i> Visa & Immigration News </a></li>
                                        <li><a href="#"><i className="fa fa-comments"></i> 03 Comments</a></li>
                                    </ul> */}
                                </div>
                            </article>
                               ))}              
                            {/*                           
                            <nav className="blog-pagination justify-content-center d-flex">
                                <ul className="pagination">
                                    <li className="page-item">
                                        <a href="#" className="page-link page-link-arrow" aria-label="Previous">
                                            <i className="fas fa-long-arrow-alt-left"></i>
                                        </a>
                                    </li>
                                    <li className="page-item">
                                        <a href="#" className="page-link">1</a>
                                    </li>
                                    <li className="page-item active">
                                        <a href="#" className="page-link">2</a>
                                    </li>
                                    <li className="page-item">
                                        <a href="#" className="page-link">3</a>
                                    </li>
                                    <li className="page-item">
                                        <a href="#" className="page-link">4</a>
                                    </li>
                                    <li className="page-item">
                                        <a href="#" className="page-link" aria-label="Next">
                                            <i className="fas fa-long-arrow-alt-right"></i>
                                        </a>
                                    </li>
                                </ul>
                            </nav> */}
                        </div>
                        }
                    </div>
                    <div className="col-lg-4">
                        <div className="blog_right_sidebar">
                            <aside className="single_sidebar_widget search_widget">
                                <form action="#">
                                    <div className="form-group">
                                        <div className="input-group mb-3">
                                            <input type="text" className="form-control" placeholder='Search Keyword'
                                                onFocus="this.placeholder = ''"
                                                onBlur="this.placeholder = 'Search Keyword'"/>
                                            <div className="input-group-append">
                                                <button className="btn" type="button"><i className="ti-search"></i></button>
                                            </div>
                                        </div>
                                    </div>
                                    <button className="button rounded-0 primary-bg text-white w-100 btn_1 boxed-btn"
                                        type="submit">Search</button>
                                </form>
                            </aside>
                            <SocialMedia />

                            <aside className="single_sidebar_widget post_category_widget">
                                <h4 className="widget_title">Category</h4>
                                {arrData.categories && arrData.categories.length > 0 &&
                                <ul className="list cat-list">
                                     {
                                       arrData.categories.map(category =>(
                                      <li key={category.id.toString()}>
                                         <Link href={`blogs/${category.catnickname}`} as={`blogs/${category.catnickname}`}>
                                           <a className="d-flex">
                                           <p>{category.categoryname} </p>&nbsp;
                                           <p>({category.totalPost})</p>
                                            </a>
                                          </Link>
                                          
                                    </li>
                                     ))}      
                                </ul>
                                }   
                            </aside>

                            <aside className="single_sidebar_widget popular_post_widget">
                                <h3 className="widget_title">Recent Post</h3>
                                {arrData.recentproducts && arrData.recentproducts.length > 0 &&
                                <div>
                                   {
                                 arrData.recentproducts.map(post =>(
                                <div className="media post_item" key={post.id.toString()}>
                                    <img  alt={post.title} src={CONFIG.FILE_URL+"thumb/"+post.image}/>
                                    <div className="media-body">
                                    <Link href={`blog/${post.nickname}`} as={`blog/${post.nickname}`}>
                                         <a className="d-inline-block">
                                           <h3>{post.title}</h3>
                                    </a>
                                    </Link>
                                        <p>{moment(post.doe).format('MMMM DD, YYYY')}</p>
                                    </div>
                                </div>
                                ))}   
                                </div>
                                }
                               
                            </aside>
                            <aside className="single_sidebar_widget tag_cloud_widget">
                                <h4 className="widget_title">Tags Cloud</h4>
                                <ul className="list">
                                    <li>
                                        <a href="#">living & travelling to India</a>
                                    </li>
                                    <li>
                                        <a href="#">COVID 19</a>
                                    </li>
                                    <li>
                                        <a href="#">Coronavirus Impact</a>
                                    </li>
                                    <li>
                                        <a href="#">Impact on Expats</a>
                                    </li>
                                    <li>
                                        <a href="#">restaurant</a>
                                    </li>
                                    <li>
                                        <a href="#">life style</a>
                                    </li>
                                    <li>
                                        <a href="#">interior design</a>
                                    </li>
                                    <li>
                                        <a href="#">Relocation</a>
                                    </li>
                                </ul>
                            </aside>


                            {/* <aside className="single_sidebar_widget instagram_feeds">
                                <h4 className="widget_title">Instagram Feeds</h4>
                                <ul className="instagram_row flex-wrap">
                                    <li>
                                        <a href="#">
                                            <img className="img-fluid" src="img/instagram-feeds-1.jpg" alt=""/>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <img className="img-fluid" src="img/instagram-feeds-2.jpg" alt=""/>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <img className="img-fluid" src="img/instagram-feeds-3.jpg" alt=""/>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <img className="img-fluid" src="img/instagram-feeds-3.jpg" alt=""/>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <img className="img-fluid" src="img/instagram-feeds-1.jpg" alt=""/>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <img className="img-fluid" src="img/instagram-feeds-2.jpg" alt=""/>
                                        </a>
                                    </li>
                                </ul>
                            </aside> */}


                            <aside className="single_sidebar_widget newsletter_widget">
                                <h4 className="widget_title">Newsletter</h4>

                                <form action="#">
                                    <div className="form-group">
                                        <input type="email" className="form-control" onFocus="this.placeholder = ''"
                                            onBlur="this.placeholder = 'Enter email'" placeholder='Enter email'
                                            required />
                                    </div>
                                    <button className="button rounded-0 primary-bg text-white w-100 btn_1 boxed-btn"
                                        type="submit">Subscribe</button>
                                </form>
                            </aside>
                        </div>
                    </div>
                </div>
            </div>
        </section>

         <section className="home-section-alt1">
            <div className="container">
                <div className="home-section-content">
                    <div className="row bod-block">
                        <div className="col-md-12 aos-init aos-animate" data-aos="fade-up" data-aos-duration="500">
                            <div className="abt-org-col">
                                <div className="abt-org-col-text">
                                    <p className="businessNeed">Not sure which solution fits your business needs?</p>
                                    <button className="btn btn-primary" type="submit">Contact us</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div className="vl"></div>
        </section>
        </main>
</>
  );
}

  export async function getStaticProps() {
    try{
     const res = await fetch(CONFIG.SERVER_URL+'getblogslist');
    const postBlogs = await res.json();
    if (!postBlogs) {
      return {
        notFound: true,
      }
    }
    return {
      props: {
        postBlogs,
      },
      revalidate: 10
    };
  }catch(e){  
    console.log("======DATA=======",e)
  }
 }

