import { notFound } from "next/navigation";
import { getTranslations } from "next-intl/server";
import { MediaEditor } from "@/components/dashboard/media/media-editor";
import { DashboardLayout } from "@/components/layout/dashboard";
import { createHelpers } from "@/lib/trpc/server";
import { Routes } from "@/config/routes";

type Props = {
    params: Promise<{
        id: string;
    }>;
};

export default async function Page({ params }: Props) {
    const {
        id
    } = await params;

    const helpers = await createHelpers();
    const t = await getTranslations();

    const [
        media
    ] = await Promise.all([
        helpers.media.get.fetch({
            id
        })
    ]);

    if(!media) {
        notFound();
    }

    return (
        <DashboardLayout
          title={t("dashboard.media.editor.update.title")}
          description={t("dashboard.media.editor.update.description")}
          back={Routes.DASHBOARD.MEDIA_LIST}>
            <MediaEditor
              mode="update"
              id={id}
              data={media} />
        </DashboardLayout>
    );
}