import { ArrowLeft, ArrowRight, Loader2, UserPlus } from 'lucide-react';

import type {
  SignInModalActions,
  SignInModalState,
} from '@/components/sign-in-modal/types';

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

export function SignupNavigation({ state, actions }: SignupNavigationProps) {
  return (
    <div className="flex items-center gap-3 mt-6">
      {state.signupStep > 1 && (
        <button
          type="button"
          onClick={actions.goToPreviousStep}
          className="flex items-center gap-2 px-4 py-2.5 rounded-xl border border-slate-700/50 text-slate-400 hover:bg-slate-800 hover:text-white transition-all text-sm font-medium"
        >
          <ArrowLeft size={16} />
          Back
        </button>
      )}
      <button
        type="button"
        onClick={actions.goToNextStep}
        disabled={state.loading || (state.signupStep === 3 && !state.selectedCampusId)}
        className="flex-1 py-3 bg-gradient-to-r from-violet-500 to-amber-500 hover:from-violet-600 hover:to-amber-600 text-white font-semibold rounded-xl transition-all duration-200 shadow-lg shadow-violet-500/25 hover:shadow-violet-500/40 disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2"
      >
        {state.loading ? (
          <Loader2 size={18} className="animate-spin" />
        ) : state.signupStep === 3 ? (
          <UserPlus size={18} />
        ) : (
          <ArrowRight size={18} />
        )}
        {state.loading
          ? 'Creating account...'
          : state.signupStep === 3
            ? 'Create Account'
            : 'Continue'}
      </button>
    </div>
  );
}
