// pages/blog/[slug].js
import React, { Fragment } from 'react';
import { useRouter } from 'next/router';
import { useTranslation } from 'next-i18next';
import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
import blogs from '../../api/blogs'; // Static metadata like images, author, etc.
import Link from 'next/link';
import bg from '/public/images/blog/banner-3.webp'
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';
import blog from '../../utils/constant.utils';

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

    const { t } = useTranslation(['blog', 'innerBanner']);

    if (!slug) return null; // Avoid hydration mismatch on first load

    // Localized content from blog.json
    const blogContent = t(`posts.${slug}`, { returnObjects: true });

    // Static metadata (images, date, author)
    const blogMeta = blog.find(blog => blog.slug === slug);

    if (!blogMeta || !blogContent?.title) {
        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={blogContent.title} backgroundImage={bg} pagesub={t('blog-details.pageSub', { ns: 'innerBanner' })}  />

            <section className="wpo-blog-single-section section-padding">
                <div className="container">
                    <div className="row">
                        <div className="col col-lg-12 col-12">
                            <div className="wpo-blog-content">
                                <div className={`post ${blogMeta.blClass}`}>
                                    <div className="responsive-entry-media">
                                        <Image
                                            src={blogMeta.blogSingleImg}
                                            alt={blogContent.title}
                                            fill
                                            style={{ objectFit: 'cover' }}
                                        />
                                    </div>
                                    {/* <div className="entry-meta">
                                        <ul>
                                            <li><i className="fi flaticon-calendar"></i> {blogMeta.create_at}</li>
                                            <li><i className="fi ti-user"></i> By <Link href="/blog">{blogMeta.authorTitle}</Link></li>
                                        </ul>
                                    </div> */}

                                    <h2 className='mt-3'>{blogContent.title}</h2>
                                    <div dangerouslySetInnerHTML={{ __html: blogContent.description }} />
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

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

export async function getStaticPaths() {
    const locales = ['en', 'es'];

    const paths = locales.flatMap(locale =>
        blog.map(blog => ({
            params: { slug: blog.slug },
            locale,
        }))
    );

    return {
        paths,
        fallback: false,
    };
}

export async function getStaticProps({ locale }) {
    return {
        props: {
            ...(await serverSideTranslations(locale, ['common', 'menu', 'blog', 'footer', 'innerBanner', 'contact'])),
        },
    };
}

export default BlogSingle;