import { Lock, Mail, User } from 'lucide-react';

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

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

export function SignupCredentialsStep({ state, actions }: SignupCredentialsStepProps) {
  return (
    <div className="space-y-4">
      <AuthField
        label="Full Name"
        value={state.draft.fullName}
        onChange={(fullName) => actions.updateDraft({ fullName })}
        placeholder="Full name"
        icon={User}
      />
      <AuthField
        label="Email Address"
        type="email"
        value={state.draft.email}
        onChange={(email) => actions.updateDraft({ email })}
        placeholder="you@school.edu"
        icon={Mail}
      />
      <AuthField
        label="Password"
        type="password"
        value={state.draft.password}
        onChange={(password) => actions.updateDraft({ password })}
        placeholder="Min. 6 characters"
        icon={Lock}
        showPassword={state.draft.showPassword}
        onTogglePassword={() => actions.setShowPassword(!state.draft.showPassword)}
      />
      <AuthField
        label="Confirm Password"
        type="password"
        value={state.draft.confirmPassword}
        onChange={(confirmPassword) => actions.updateDraft({ confirmPassword })}
        placeholder="Re-enter your password"
        icon={Lock}
        showPassword={state.draft.showPassword}
      />
    </div>
  );
}
