import React, { Fragment } from 'react';
import { useRouter } from 'next/router';
import blogs from '../../api/blogs';
import Link from 'next/link';
import PageTitle from '../../components/pagetitle/PageTitle';
import Navbar2 from '../../components/Navbar2/Navbar2';
import Footer from '../../components/footer/Footer';
import Scrollbar from '../../components/scrollbar/scrollbar';
import Image from 'next/image';

const BlogSingle = (props) => {
    const router = useRouter();
    const { slug } = router.query;

    const BlogDetails = blogs.find(blog => blog.slug === slug);

    if (!BlogDetails) {
        return (
            <div className="container text-center py-5">
                <h2>Blog not found!</h2>
                <Link href="/blog">Back to Blog</Link>
            </div>
        );
    }

    return (
        <Fragment>
            <Navbar2 />
            <PageTitle pageTitle={BlogDetails.title} pagesub={'Blog'} />

            <section className="wpo-blog-single-section section-padding">
                <div className="container">
                    <div className="row">
                        <div className={`col col-lg-12 col-12 ${props.blRight}`}>
                            <div className="wpo-blog-content">
                                <div className={`post ${BlogDetails.blClass}`}>
                                    <div className="entry-media">
                                        <div style={{ width: "100%", height: "400px", position: "relative" }}>
                                            <Image
                                                src={BlogDetails.blogSingleImg}
                                                alt={BlogDetails.title}
                                                fill
                                                style={{ objectFit: "cover" }}
                                            />
                                        </div>
                                    </div>

                                    <div className="entry-meta">
                                        <ul>
                                            <li><i className="fi flaticon-calendar"></i> {BlogDetails.create_at}</li>
                                            <li>
                                                <i className="fi ti-user"></i> By{' '}
                                                <Link href="/blog">{BlogDetails.authorTitle}</Link>
                                            </li>
                                        </ul>
                                    </div>

                                    <h2>{BlogDetails.title}</h2>
                                    <div dangerouslySetInnerHTML={{ __html: BlogDetails.description }}></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            <Footer />
            <Scrollbar />
        </Fragment>
    );
};

export default BlogSingle;