"use client";

import { Suspense, use } from "react";
import { useSearchParams } from "next/navigation";
import ExploreReelsView from "@/components/explore/ExploreReelsView";
import PageLoader from "@/components/ui/PageLoader";

function ExploreReelContent({ id }: { id: string }) {
  const searchParams = useSearchParams();
  const typeParam = searchParams.get("type");
  const initialType = typeParam === "academy" ? "academy" : "post";

  return (
    <ExploreReelsView
      initialId={id}
      initialType={initialType}
      showClose
    />
  );
}

export default function ExploreReelPage({
  params,
}: {
  params: Promise<{ id: string }>;
}) {
  const { id } = use(params);

  return (
    <main className="min-h-[100dvh]">
      <Suspense fallback={<PageLoader className="min-h-[100dvh]" />}>
        <ExploreReelContent id={id} />
      </Suspense>
    </main>
  );
}
