import React, { Fragment } from 'react';
import Navbar from '../../../../components/Navbar/Navbar';
import Footer from '../../../../components/footer/Footer';
import { Scrollbar } from 'swiper';
// import blogs from '../../../../api/blogs'; // Assuming you have a local blogs API
// import ServicesList from '../../api/services'
import ServicesList from '../../../../api/services';
import Image from 'next/image';
import { useTranslations } from 'next-intl';
import ServiceDescription from '../../../../components/ServiceDescription';

const ServiceDetails = ({ post }) => {
    const t = useTranslations("SerVices");
    if (!post) {
        return <div>Loading...</div>;
    }

    return (
        <Fragment>
            <Navbar hclass={"wpo-header-style-2"} topbarNone={"topbar-none"} />

            <section className="wpo-blog-section section-padding">
                <div className="container">
                    <div className="wpo-blog-wrap">
                        <div className="wpo-blog-items">
                            <div style={{ alignItems: "start", marginTop: "1rem" }} className="row">
                                <div className="col-md-6">
                                    <div>
                                        {/* <h1 style={{ color: "#fff", textAlign: "center" }}>{t(post.name)}</h1> */}
                                        <ServiceDescription serviceID={post.id} />
                                        {/* <p>{t(post.slug)}</p> */}
                                    </div>
                                </div>
                                <div className="col-md-6">
                                    <div style={{ color: "#fff", textAlign: "center" }}>
                                        <Image src={post.AtImg} alt="" />
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
            <Footer />
            {/*  <Scrollbar /> */}
        </Fragment>
    )
}

export async function getStaticPaths() {
    const paths = ServicesList.map((service) => ({
        params: { id: service.id.toString() },
    }));

    return {
        paths,
        fallback: true,
    };
}

export async function getStaticProps({ params, locale }) {
    const post = ServicesList.find(service => service.id.toString() === params.id);

    return {
        props: {
            post,
            messages: (await import(`../../../../messages/${locale}.json`)).default,
        },
        revalidate: 10,
    };
}

export default ServiceDetails;
