import React, { Fragment } from "react";
import Navbar2 from "../../components/Navbar2/Navbar2";
import PageTitle from "../../components/pagetitle/PageTitle";
import Scrollbar from "../../components/scrollbar/scrollbar";
import Footer from "../../components/footer/Footer";
import Image from "next/image";
import Link from "next/link";
import servicesBanner from "/public/images/service/service-details-banner.webp";
import { useTranslation } from "next-i18next";
import { serverSideTranslations } from "next-i18next/serverSideTranslations";

const ServiceDetailsPage = ({ service }) => {
  const { t } = useTranslation("services");

  if (!service) {
    return (
      <Fragment>
        <Navbar2 />
        <div className="container text-center py-5">
          <h2>{t("page.serviceNotFound", "Service not found!")}</h2>
          <Link href="/">{t("page.backHome", "Back to Home")}</Link>
        </div>
        <Footer />
        <Scrollbar />
      </Fragment>
    );
  }

  return (
    <Fragment>
      <Navbar2 />
      <PageTitle
        pageTitle={service.sTitle}
        backgroundImage={servicesBanner}
        pagesub={t("page.subtitle")}
      />

      <section className="wpo-blog-single-section section-padding">
        <div className="container">
          <div className="row">
            <div className="col-12">
              <div className="wpo-blog-content">
                <div className="post format-standard-image">
                  {/* Banner Image */}
                  <div className="entry-media">
                    <div style={{ width: "100%", height: "650px", position: "relative" }}>
                      <Image
                        src={service.sImgS}
                        alt={service.sTitle}
                        fill
                        style={{ objectFit: "cover" }}
                        unoptimized
                      />
                    </div>
                  </div>

                  <h2>{service.sTitle}</h2>

                  <div
                    dangerouslySetInnerHTML={{ __html: service.descriptiondetail }}
                  />

                  {service.blockquotes &&
                    service.blockquotes.map((quote, idx) => (
                      <blockquote key={idx}>{quote}</blockquote>
                    ))}

                  {service.gallery && (
                    <div className="gallery">
                      {service.gallery.map((img, i) => (
                        <div key={i}>
                          <Image
                            src={img}
                            alt={`Gallery ${i}`}
                            width={400}
                            height={300}
                            unoptimized
                          />
                        </div>
                      ))}
                    </div>
                  )}
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

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

export default ServiceDetailsPage;

export async function getStaticPaths({ locales }) {
  const services = (await import("../../public/locales/en/services.json")).campaigns;

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

  return {
    paths,
    fallback: false,
  };
}

export async function getStaticProps({ params, locale }) {
  const services = (await import(`../../public/locales/${locale}/services.json`))
    .campaigns;

  const service = services.find((item) => item.slug === params.slug) || null;

  return {
    props: {
      service,
      ...(await serverSideTranslations(locale, ["common", "menu", "services"])),
    },
  };
}