import { BloubAvatar } from "@/components/bloub-avatar";

type CanvasLogoLoadingViewProps = {
  label?: string;
  siteName?: string | null;
  siteLogo?: string | null;
  siteLogoDark?: string | null;
};

export function CanvasLogoLoadingView({
  label = "正在加载画布...",
}: CanvasLogoLoadingViewProps) {
  return (
    <div className="flex h-dvh w-screen items-center justify-center bg-[#f4f4f5] text-[#20242a] dark:bg-[#08090b] dark:text-zinc-100">
      <div className="flex flex-col items-center gap-2.5">
        <BloubAvatar
          label={label}
          playSequence
          size={104}
          state="idle"
          surface="page"
        />
        <div className="text-[12px] font-medium tracking-[0.16em] text-[#6b7280] dark:text-zinc-400">
          {label}
        </div>
      </div>
    </div>
  );
}