import React from "react";
import Breadcrumb from "@/components/Common/Breadcrumb";
import ServiceDetailsContent from "@/components/service/Common/ServiceDetailsContent";
import serviceData from "../cms-ecommerce.json";
import { notFound } from "next/navigation";
import type { Metadata } from "next";

type Props = {
  params: Promise<{ slug: string }>;
};

export async function generateStaticParams() {
  return Object.keys(serviceData.services).map((slug) => ({
    slug,
  }));
}

export async function generateMetadata({ params }: Props): Promise<Metadata> {
  const { slug } = await params;
  const service =
    serviceData.services[slug as keyof typeof serviceData.services];

  if (!service) {
    return {};
  }

  return {
    title: service.seo.title,
    description: service.seo.description,
    icons: {
      icon: "/img/favicon.png",
    },
  };
}

export default async function Page({ params }: Props) {
  const { slug } = await params;
  const service =
    serviceData.services[slug as keyof typeof serviceData.services];

  if (!service) {
    notFound();
  }

  return (
    <>
      <Breadcrumb
        pageTitle={service.pageTitle}
        Breadcrumbitems={service.breadcrumb}
      />

      <ServiceDetailsContent slug={slug} service={service} sidebar={serviceData.sidebar} />
    </>
  );
}