"use client";

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

const ImageEditorLayout = dynamic(
  () =>
    import("@/components/image-editor/ImageEditorLayout").then(
      (mod) => mod.ImageEditorLayout
    ),
  {
    ssr: false,
    loading: () => <ImageEditorLoading />,
  }
);

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

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

export default function ImageStudioPage({ params }: ImageStudioPageProps) {
  return <ImageEditorLayout projectId={params.projectId} />;
}
