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 text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>
          Account Credentials
        </h2>

        <p className="text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
          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-[#ddd8eb] focus:border-[#664fa3]"
            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-[#ddd8eb] focus:border-[#664fa3]"
            data-testid="password-input"
          />
          <p className="text-sm text-[#664fa3] mt-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
            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-[#ddd8eb] focus:border-[#664fa3]"
            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;
