import React from 'react';
import PageBanner from '@/components/Common/PageBanner';
import BlogSidebar from '@/components/Blog/BlogSidebar';
import * as Icon from 'react-feather';
import Link from 'next/link';

import ReactHtmlParser from "react-html-parser";

const News = function ({ backend, news, othernews, ...props }) {

    const NewsList = news.map((data) => {
        return (
            <>
                <div className="blog-details-desc">
                    <div className="article-image">
                        <img src={`${backend}${data.img[0]["url"]}`} width="800px" alt="image" />
                    </div>

                    <div className="article-content">
                        <div className="entry-meta">
                            <ul>
                                <li>
                                    <Icon.Clock /> September 31, 2021
                                </li>
                                <li>
                                    <Icon.User /> <a href="#">Steven Smith</a>
                                </li>
                            </ul>
                        </div>

                        <h2>{data.title}</h2>

                        <p>{ReactHtmlParser(data.description)}</p>

                        {/* <blockquote>
                            <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>

                            <cite>Tom Cruise</cite>
                        </blockquote> */}

                        <div className="article-footer">
                            <div className="article-tags">
                                <a href="#">Motor</a>
                                <a href="#">Services</a>
                                <a href="#">Sparepart</a>
                                <a href="#">Event</a>
                                <a href="#">Promo</a>
                            </div>
                        </div>
                    </div>
                </div>
            </>
        )
    })

    const PopularNews = othernews.map((data) => {
        return (
            <article className="item">
                <Link href="/blog-details">
                    <a className="thumb">
                        <span className="fullimage cover bg1" role="img"></span>
                    </a>
                </Link>

                <div className="info">
                    <img src={`${backend}${data.img[0]["url"]}`} style={{ width: "100px" }} />
                    <time>{data.published_at}</time>
                    <h4 className="title usmall">
                        <Link href="/blog-details">
                            <a style={{ fontSize: "15px" }}>{data.title}</a>
                        </Link>
                    </h4>
                </div>

                <div className="clear"></div>
            </article>
        )
    })
    return (
        <div>
            <PageBanner pageTitle="Latest News" />

            <div className="blog-details-area ptb-80">
                <div className="container">
                    <div className="row">
                        <div className="col-lg-8 col-md-12">

                            {NewsList}

                            <div className="comments-area">
                                <h3 className="comments-title">2 Comments:</h3>

                                <ol className="comment-list">
                                    <li className="comment">
                                        <article className="comment-body">
                                            <footer className="comment-meta">
                                                <div className="comment-author vcard">
                                                    <img src="/images/client-image/client1.jpg" className="avatar" alt="image" />
                                                    <b className="fn">John Jones</b>
                                                    <span className="says">says:</span>
                                                </div>

                                                <div className="comment-metadata">
                                                    April 24, 2019 at 10:59 am
                                                </div>
                                            </footer>

                                            <div className="comment-content">
                                                <p>Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen.</p>
                                            </div>

                                            <div className="reply">
                                                <a href="#" className="comment-reply-link">Reply</a>
                                            </div>
                                        </article>

                                        <ol className="children">
                                            <li className="comment">
                                                <article className="comment-body">
                                                    <footer className="comment-meta">
                                                        <div className="comment-author vcard">
                                                            <img src="/images/client-image/client2.jpg" className="avatar" alt="image" />
                                                            <b className="fn">Steven Smith</b>
                                                            <span className="says">says:</span>
                                                        </div>

                                                        <div className="comment-metadata">
                                                            April 24, 2019 at 10:59 am
                                                        </div>
                                                    </footer>

                                                    <div className="comment-content">
                                                        <p>Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen.</p>
                                                    </div>

                                                    <div className="reply">
                                                        <a href="#" className="comment-reply-link">Reply</a>
                                                    </div>
                                                </article>
                                            </li>

                                            <ol className="children">
                                                <li className="comment">
                                                    <article className="comment-body">
                                                        <footer className="comment-meta">
                                                            <div className="comment-author vcard">
                                                                <img src="/images/client-image/client3.jpg" className="avatar" alt="image" />
                                                                <b className="fn">Sarah Taylor</b>
                                                                <span className="says">says:</span>
                                                            </div>

                                                            <div className="comment-metadata">
                                                                April 24, 2019 at 10:59 am
                                                            </div>
                                                        </footer>

                                                        <div className="comment-content">
                                                            <p>Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen.</p>
                                                        </div>

                                                        <div className="reply">
                                                            <a href="#" className="comment-reply-link">Reply</a>
                                                        </div>
                                                    </article>
                                                </li>
                                            </ol>
                                        </ol>
                                    </li>

                                    <li className="comment">
                                        <article className="comment-body">
                                            <footer className="comment-meta">
                                                <div className="comment-author vcard">
                                                    <img src="/images/client-image/client4.jpg" className="avatar" alt="image" />
                                                    <b className="fn">John Doe</b>
                                                    <span className="says">says:</span>
                                                </div>

                                                <div className="comment-metadata">
                                                    April 24, 2019 at 10:59 am
                                                </div>
                                            </footer>

                                            <div className="comment-content">
                                                <p>Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen.</p>
                                            </div>

                                            <div className="reply">
                                                <a href="#" className="comment-reply-link">Reply</a>
                                            </div>
                                        </article>

                                        <ol className="children">
                                            <li className="comment">
                                                <article className="comment-body">
                                                    <footer className="comment-meta">
                                                        <div className="comment-author vcard">
                                                            <img src="/images/client-image/client5.jpg" className="avatar" alt="image" />
                                                            <b className="fn">James Anderson</b>
                                                            <span className="says">says:</span>
                                                        </div>

                                                        <div className="comment-metadata">
                                                            April 24, 2019 at 10:59 am
                                                        </div>
                                                    </footer>

                                                    <div className="comment-content">
                                                        <p>Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen.</p>
                                                    </div>

                                                    <div className="reply">
                                                        <a href="#" className="comment-reply-link">Reply</a>
                                                    </div>
                                                </article>
                                            </li>
                                        </ol>
                                    </li>
                                </ol>

                                <div className="comment-respond">
                                    <h3 className="comment-reply-title">Leave a Reply</h3>

                                    <form className="comment-form">
                                        <p className="comment-notes">
                                            <span id="email-notes">Your email address will not be published.</span>
                                            Required fields are marked
                                            <span className="required">*</span>
                                        </p>
                                        <p className="comment-form-comment">
                                            <label>Comment</label>
                                            <textarea name="comment" id="comment" cols="45" rows="5" maxLength="65525" required="required"></textarea>
                                        </p>
                                        <p className="comment-form-author">
                                            <label>Name <span className="required">*</span></label>
                                            <input type="text" id="author" name="author" required="required" />
                                        </p>
                                        <p className="comment-form-email">
                                            <label>Email <span className="required">*</span></label>
                                            <input type="email" id="email" name="email" required="required" />
                                        </p>
                                        <p className="comment-form-url">
                                            <label>Website</label>
                                            <input type="url" id="url" name="url" />
                                        </p>
                                        <p className="comment-form-cookies-consent">
                                            <input type="checkbox" value="yes" name="comment-cookies-consent" id="comment-cookies-consent" />
                                            <label htmlFor="comment-cookies-consent">Save my name, email, and website in this browser for the next time I comment.</label>
                                        </p>
                                        <p className="form-submit">
                                            <input type="submit" name="submit" id="submit" className="submit" value="Post Comment" />
                                        </p>
                                    </form>
                                </div>
                            </div>
                        </div>

                        <div className="col-lg-4 col-md-12">
                            <div className="widget-area" id="secondary">
                                <div className="widget widget_search">
                                    <form className="search-form">
                                        <label>
                                            <input type="search" className="search-field" placeholder="Search..." />
                                        </label>
                                        <button type="submit">
                                            <Icon.Search />
                                        </button>
                                    </form>
                                </div>

                                {PopularNews}

                                <div className="widget widget_categories">
                                    <h3 className="widget-title">Categories</h3>

                                    <ul>
                                        <li><a href="#">Business</a></li>
                                        <li><a href="#">Privacy</a></li>
                                        <li><a href="#">Technology</a></li>
                                        <li><a href="#">Tips</a></li>
                                        <li><a href="#">Uncategorized</a></li>
                                    </ul>
                                </div>

                                <div className="widget widget_tag_cloud">
                                    <h3 className="widget-title">Tags</h3>

                                    <div className="tagcloud">
                                        <a href="#">Motor <span className="tag-link-count">(3)</span></a>
                                        <a href="#">Services <span className="tag-link-count">(3)</span></a>
                                        <a href="#">Sparepart <span className="tag-link-count">(2)</span></a>
                                        <a href="#">Promo <span className="tag-link-count">(2)</span></a>
                                        <a href="#">Event <span className="tag-link-count">(1)</span></a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    )
}

export default News;