import { AccountSummary } from '@/components/sign-in-modal/AccountSummary';
import { SignupCampusStep } from '@/components/sign-in-modal/SignupCampusStep';
import { SignupCredentialsStep } from '@/components/sign-in-modal/SignupCredentialsStep';
import { SignupNavigation } from '@/components/sign-in-modal/SignupNavigation';
import { SignupRoleStep } from '@/components/sign-in-modal/SignupRoleStep';
import type {
  SignInModalActions,
  SignInModalState,
} from '@/components/sign-in-modal/types';

type SignupFormProps = {
  state: SignInModalState;
  actions: SignInModalActions;
};

export function SignupForm({ state, actions }: SignupFormProps) {
  return (
    <div>
      {state.signupStep === 1 && <SignupCredentialsStep state={state} actions={actions} />}
      {state.signupStep === 2 && <SignupRoleStep state={state} actions={actions} />}
      {state.signupStep === 3 && <SignupCampusStep state={state} actions={actions} />}
      <SignupNavigation state={state} actions={actions} />
      {state.signupStep === 3 && <AccountSummary state={state} />}
    </div>
  );
}
