Vacancy added

app/(website)/vacancies/[slug]/page.tsx

@@ -0,0 +1,56 @@
+import { notFound } from "next/navigation";
+import { Vacancy } from "@/types";
+import VacancyClientContent from "../_components/VacancyClientContent";
+
+interface ExtendedVacancy extends Vacancy {
+  company?: {
+    name: string;
+    logoUrl?: string;
+    websiteUrl?: string;
+  };
+  skills?: string[];
+}
+
+async function getVacancy(slug: string): Promise<ExtendedVacancy | null> {
+  const res = await fetch(`http://localhost:3000/api/vacancies/${slug}`, {
+    cache: "no-store",
+  });
+  if (!res.ok) {
+    if (res.status === 404) return null;
+    console.error(`Failed to fetch vacancy ${slug}: ${res.statusText}`);
+    throw new Error("Failed to fetch vacancy details");
+  }
+  return res.json();
+}
+
+interface VacancyDetailsPageProps {
+  params: { slug: string };
+}
+
+export default async function VacancyDetailsPage({
+  params,
+}: VacancyDetailsPageProps) {
+  const { slug } = await params;
+  const vacancy = await getVacancy(slug);
+
+  if (!vacancy) {
+    notFound();
+  }
+
+  const shareUrl = `${process.env.WEBSITE_URL}/vacancies/${params.slug}`;
+  const shareTitle = encodeURIComponent(
+    `Job Opening: ${vacancy.title} at ${
+      vacancy.company?.name || "Owethu Managed Services"
+    }`
+  );
+
+  return (
+    <div className="bg-white text-gray-800 font-poppins overflow-x-hidden min-h-screen py-12 md:py-5">
+      <VacancyClientContent
+        vacancy={vacancy}
+        shareUrl={shareUrl}
+        shareTitle={shareTitle}
+      />
+    </div>
+  );
+}