qudoco-fe/app/details/[slug]/page.tsx

"use client";

import { useSearchParams } from "next/navigation";

import VideoPlayerSection from "@/components/details/video-sections";
import VideoSidebar from "@/components/details/video-sidebar-details";

import ImageSidebar from "@/components/details/image-sidebar-details";
import ImageDetailSection from "@/components/details/image-selections";
import DocumentDetailSection from "@/components/details/document-selections";
import AudioPlayerSection from "@/components/details/audio-selections";
import DocumentSidebar from "@/components/details/document-sidebar-details";
import AudioSidebar from "@/components/details/audio-sidebar-details";
import LandingSiteNav from "@/components/landing-page/landing-site-nav";
import Footer from "@/components/landing-page/footer";

export default function DetailsPage() {
  const params = useSearchParams();
  const type = params.get("type");

  return (
    <div className="min-h-screen bg-white">
      <LandingSiteNav
        newsHub
        searchFormAction="/news-services"
        searchPlaceholder="Cari berita, artikel, atau topik..."
      />
      <div className="mx-auto max-w-7xl px-6 pt-28 pb-10 md:pt-36">
        <div className="grid grid-cols-1 gap-8 lg:grid-cols-3">
          {/* LEFT */}
          <div className="lg:col-span-2">
            {type === "video" && <VideoPlayerSection />}
            {type === "image" && <ImageDetailSection />}
            {type === "text" && <DocumentDetailSection />}
            {type === "audio" && <AudioPlayerSection />}
          </div>

          {/* RIGHT */}
          <div className="lg:col-span-1">
            {type === "video" && <VideoSidebar />}
            {type === "image" && <ImageSidebar />}
            {type === "text" && <DocumentSidebar />}
            {type === "audio" && <AudioSidebar />}
          </div>
        </div>
      </div>
      <Footer />
    </div>
  );
}