import { useEffect, useCallback } from "react";
import { observer } from "mobx-react-lite";
import Image from "next/image";
// components
import { InstanceSetupFormRoot } from "components/instance";
// hooks
import { useUser } from "hooks/store";
// images
import BluePlaneLogoWithoutText from "public/plane-logos/blue-without-text.png";

export const InstanceSetupView = observer(() => {
  // store hooks
  const { fetchCurrentUser } = useUser();

  const mutateUserInfo = useCallback(() => {
    fetchCurrentUser();
  }, [fetchCurrentUser]);

  useEffect(() => {
    mutateUserInfo();
  }, [mutateUserInfo]);

  return (
    <>
      <div className="flex h-full w-full flex-col bg-onboarding-gradient-100">
        <div className="flex items-center justify-between px-8 pb-4 sm:px-16 sm:py-5 lg:px-28 ">
          <div className="flex items-center gap-x-2 py-10">
            <Image src={BluePlaneLogoWithoutText} height={30} width={30} alt="Plane Logo" className="mr-2" />
            <span className="text-2xl font-semibold sm:text-3xl">Plane</span>
          </div>
        </div>
        <InstanceSetupFormRoot />
      </div>
    </>
  );
});