"use client";

import { Input, Label } from "@/components/atoms";
import { PasswordRequirements } from "@/features/auth/components";
import { usePasswordValidation } from "@/features/auth/hooks/usePasswordValidation";
import type { AccountFormErrors } from "./types";

interface PasswordSectionProps {
  password: string;
  confirmPassword: string;
  onPasswordChange: (value: string) => void;
  onConfirmPasswordChange: (value: string) => void;
  errors: AccountFormErrors;
  clearError: (field: keyof AccountFormErrors) => void;
  loading: boolean;
}

export function PasswordSection({
  password,
  confirmPassword,
  onPasswordChange,
  onConfirmPasswordChange,
  errors,
  clearError,
  loading,
}: PasswordSectionProps) {
  const { checks } = usePasswordValidation(password);

  return (
    <>
      <div className="space-y-2">
        <Label htmlFor="password">
          Password <span className="text-danger">*</span>
        </Label>
        <Input
          id="password"
          type="password"
          value={password}
          onChange={e => {
            onPasswordChange(e.target.value);
            clearError("password");
          }}
          placeholder="Create a strong password"
          disabled={loading}
          error={errors.password}
          autoComplete="new-password"
        />
        {errors.password && <p className="text-sm text-danger">{errors.password}</p>}
        <PasswordRequirements checks={checks} showHint={password.length === 0} />
      </div>

      <div className="space-y-2">
        <Label htmlFor="confirmPassword">
          Confirm Password <span className="text-danger">*</span>
        </Label>
        <Input
          id="confirmPassword"
          type="password"
          value={confirmPassword}
          onChange={e => {
            onConfirmPasswordChange(e.target.value);
            clearError("confirmPassword");
          }}
          placeholder="Confirm your password"
          disabled={loading}
          error={errors.confirmPassword}
          autoComplete="new-password"
        />
        {errors.confirmPassword && <p className="text-sm text-danger">{errors.confirmPassword}</p>}
      </div>
    </>
  );
}
