"use client";

import { AuthLayout } from "../components";
import { SignupForm } from "@/features/auth/components";
import { useAuthStore } from "../stores/auth.store";
import { LoadingOverlay } from "@/components/atoms";

export function SignupView() {
  const { loading, isAuthenticated } = useAuthStore();

  return (
    <>
      <AuthLayout
        title="Create Your Account"
        subtitle="Set up your portal access in a few simple steps"
        wide
      >
        <SignupForm />
      </AuthLayout>

      {/* Full-page loading overlay during authentication */}
      <LoadingOverlay
        isVisible={loading && isAuthenticated}
        title="Setting up your account..."
        subtitle="Please wait while we prepare your dashboard"
      />
    </>
  );
}

export default SignupView;
