import ServiceBanner from "@components/service/ServiceBanner";
import ServiceContent from "@components/service/ServiceContent";
import ServiceOtherServices from "@components/service/ServiceOtherServices";
import { ServiceBySlug, OtherServices } from "@lib/data";
import type { Metadata } from "next";

export async function generateMetadata({
  params,
}: {
  params: { slug: string };
}): Promise<Metadata> {
  const pageTitle = params.slug.split("-").join(" ");

  return {
    title: pageTitle,
    description: pageTitle,
    keywords: pageTitle,
  };
}

const Service = async ({ params }: { params: { slug: string } }) => {
  const service = await ServiceBySlug(params.slug);
  const otherService = await OtherServices(params.slug);

  let defaultAltText = "Image Description";
  const src = service.data.banner;
  const color = service.data.overlayColor;
  const title = service.data.title;
  const description = service.data.description;

  if (service.data.bannerDescription) {
    defaultAltText = service.data.bannerDescription;
  }

  return (
    <>
      <ServiceBanner altText={defaultAltText} src={src} color={color} />
      <ServiceContent title={title} description={description} />
      <ServiceOtherServices otherService={otherService} />
    </>
  );
};

export default Service;