"use client";

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

import { cn } from "@/lib/utils";

function CanvasLoading() {
  const t = useTranslations("auto.componentsStudioVideoCanvasArea");
  return (
    <div className="flex h-full w-full items-center justify-center rounded-b-lg bg-gray-100 text-sm text-gray-400">
      {t("loading")}
    </div>
  );
}

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

export interface CanvasAreaProps {
  className?: string;
}

export function CanvasArea({ className }: CanvasAreaProps) {
  const t = useTranslations("auto.componentsStudioVideoCanvasArea");
  return (
    <section
      className={cn(
        "flex min-h-0 flex-1 flex-col overflow-hidden bg-[#f0f4f8] p-4",
        className
      )}
    >
      <div className="flex min-h-0 w-full max-w-4xl flex-1 flex-col items-center justify-center self-center">
        <div className="mx-4 mb-0 mt-0 flex items-center gap-2 rounded-t-lg border border-b-0 border-gray-200 bg-white px-4 py-2 text-xs text-gray-500">
          <Info className="h-3.5 w-3.5 shrink-0 text-blue-500" aria-hidden />
          <span>
            {t.rich("editingNotice", {
              preview: (chunks) => (
                <strong className="text-gray-700">{chunks}</strong>
              ),
            })}
          </span>
        </div>
        <div className="mx-4 aspect-video h-full max-h-full min-h-0 flex-1 self-stretch rounded-t-none rounded-b-lg">
          <CanvasEditor />
        </div>
      </div>
    </section>
  );
}
