import { notFound } from "next/navigation";

import { getService } from "@/lib/api";

export default async function ServiceDetailPage({
  params,
}: {
  params: Promise<{ slug: string }>;
}) {
  const { slug } = await params;
  const service = await getService(slug);

  if (!service) {
    notFound();
  }

  return (
    <div className="container">
      <section className="page-hero">
        <span className="eyebrow">Услуга</span>
        <h1>{service.title}</h1>
        <p className="page-intro">{service.short_description}</p>
      </section>

      <section className="page-layout page-layout--single">
        <article className="page-panel">
          <div className="page-body">{service.description}</div>
        </article>
      </section>
    </div>
  );
}