import { useTheme } from "next-themes";
// assets
import maintenanceModeDarkModeImage from "@/app/assets/instance/maintenance-mode-dark.svg?url";
import maintenanceModeLightModeImage from "@/app/assets/instance/maintenance-mode-light.svg?url";
// layouts
import DefaultLayout from "@/layouts/default-layout";
// components
import { MaintenanceMessage } from "@/buzzwareTech-web/components/instance";

export function MaintenanceView() {
  // hooks
  const { resolvedTheme } = useTheme();
  // derived values
  const maintenanceModeImage =
    resolvedTheme === "dark"
      ? maintenanceModeDarkModeImage
      : maintenanceModeLightModeImage;
  return (
    <DefaultLayout>
      <div className="relative container mx-auto flex h-full w-full max-w-xl flex-col items-center justify-center gap-2 gap-y-6 bg-surface-1 text-center">
        <div className="relative w-full">
          <img
            src={maintenanceModeImage}
            height="176"
            width="288"
            alt="ProjectSettingImg"
            className="h-full w-full object-fill object-center"
          />
        </div>
        <div className="relative mt-4 flex w-full flex-col gap-4">
          <MaintenanceMessage />
        </div>
      </div>
    </DefaultLayout>
  );
}