"use client";

import dynamic from "next/dynamic";
import { useTranslations } from "next-intl";

const VideoStudioLayout = dynamic(
  () =>
    import("@/components/studio/video/VideoStudioLayout").then(
      (mod) => mod.VideoStudioLayout
    ),
  {
    ssr: false,
    loading: () => <VideoStudioLoading />,
  }
);

function VideoStudioLoading() {
  const t = useTranslations("auto.appStudioVideoProjectIdPage");
  return (
    <div className="flex h-screen w-screen items-center justify-center bg-gray-900 text-sm text-gray-500">
      {t("loading")}
    </div>
  );
}

interface VideoStudioPageProps {
  params: {
    projectId: string;
  };
}

export default function VideoStudioPage({ params }: VideoStudioPageProps) {
  return <VideoStudioLayout projectId={params.projectId} />;
}
