import React from 'react';
import { Label } from '../ui/label';
import { Input } from '../ui/input';
import { PasswordInput } from '../ui/password-input';

const RegistrationStep4 = ({ formData, handleInputChange }) => {
  return (
    <div className="space-y-6">
      <div className="space-y-4">
        <h2 className="text-2xl font-semibold fraunces text-[#3D405B]">
          Account Credentials
        </h2>

        <p className="text-[#6B708D]">
          Your email is also your username that you can use to login.
          Please note you can only login after your application is approved.
        </p>
      </div>

      <div className="space-y-4">
        <div>
          <Label htmlFor="email">Email *</Label>
          <Input
            id="email"
            name="email"
            type="email"
            required
            value={formData.email}
            onChange={handleInputChange}
            placeholder="your.email@example.com"
            className="h-14 rounded-xl border-2 border-[#EAE0D5] focus:border-[#E07A5F]"
            data-testid="email-input"
          />
        </div>

        <div>
          <Label htmlFor="password">Password *</Label>
          <PasswordInput
            id="password"
            name="password"
            required
            minLength={6}
            value={formData.password}
            onChange={handleInputChange}
            placeholder="At least 6 characters"
            className="h-14 rounded-xl border-2 border-[#EAE0D5] focus:border-[#E07A5F]"
            data-testid="password-input"
          />
          <p className="text-sm text-[#6B708D] mt-2">
            Must be at least 6 characters long
          </p>
        </div>

        <div>
          <Label htmlFor="confirmPassword">Repeat Password *</Label>
          <PasswordInput
            id="confirmPassword"
            name="confirmPassword"
            required
            value={formData.confirmPassword}
            onChange={handleInputChange}
            placeholder="Re-enter your password"
            className="h-14 rounded-xl border-2 border-[#EAE0D5] focus:border-[#E07A5F]"
            data-testid="confirm-password-input"
          />
          {formData.confirmPassword && formData.password !== formData.confirmPassword && (
            <p className="text-sm text-red-500 mt-2">
              Passwords do not match
            </p>
          )}
        </div>
      </div>
    </div>
  );
};

export default RegistrationStep4;