/**
 * Account Step Component
 * Email and password fields for signup
 */

"use client";

import { FormField } from "@/components/molecules/FormField/FormField";

interface AccountStepProps {
  formData: {
    email: string;
    password: string;
    confirmPassword: string;
  };
  errors: {
    email?: string;
    password?: string;
    confirmPassword?: string;
  };
  onFieldChange: (field: string, value: string) => void;
  onFieldBlur: (field: string) => void;
  loading?: boolean;
}

export function AccountStep({
  formData,
  errors,
  onFieldChange,
  onFieldBlur,
  loading = false,
}: AccountStepProps) {
  return (
    <div className="space-y-4">
      <FormField
        label="Email Address"
        error={errors.email}
        required
        type="email"
        value={formData.email}
        onChange={e => onFieldChange("email", e.target.value)}
        onBlur={() => onFieldBlur("email")}
        placeholder="Enter your email address"
        disabled={loading}
        autoComplete="email"
        autoFocus
      />

      <FormField
        label="Password"
        error={errors.password}
        required
        type="password"
        value={formData.password}
        onChange={e => onFieldChange("password", e.target.value)}
        onBlur={() => onFieldBlur("password")}
        placeholder="Create a strong password"
        disabled={loading}
        autoComplete="new-password"
      />

      <FormField
        label="Confirm Password"
        error={errors.confirmPassword}
        required
        type="password"
        value={formData.confirmPassword}
        onChange={e => onFieldChange("confirmPassword", e.target.value)}
        onBlur={() => onFieldBlur("confirmPassword")}
        placeholder="Confirm your password"
        disabled={loading}
        autoComplete="new-password"
      />
    </div>
  );
}
