"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 FloatingMenuNews from "@/components/landing-page/floating-news";
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">
      <div className="max-w-7xl mx-auto px-6 py-10">
        <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
          {/* 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>
          <FloatingMenuNews />
        </div>
      </div>
      <Footer />
    </div>
  );
}