import Layout from "@/components/layout/Layout";
import { servicesList } from "@/utils/Services.utils";
import ServiceDetailClient from "./ServiceDetailClient";

export async function generateMetadata({ params }) {
  const service = servicesList.find((item) => item.slug === params.slug);

  if (!service) {
    return {
      title: "Service | MySite",
      description: "Explore our services",
    };
  }

  return {
    title: service.metaTitle || service.shortTitle || service.title,
    description: service.metaDescription || service.shortDesc || "Explore this service in detail",
  };
}


export async function generateStaticParams() {
  return servicesList.map((item) => ({
    slug: item.slug,
  }));
}

export default function ServiceDetailPage({ params }) {
  const { slug } = params;
  const service = servicesList.find((item) => item.slug === slug);

  if (!service) {
    return <div>Service not found</div>;
  }

  return (
    <Layout headerStyle={2} footerStyle={1} 
    breadcrumbTitle={service.shortTitle}  
    bannerImage={service.bannerImage}>
      <ServiceDetailClient slug={slug} service={service} servicesList={servicesList} />
    </Layout>
  );
}