import type { AuthCaptchaChallenge } from '../../services/authService';

type CaptchaChallengeFieldProps = {
  challenge: AuthCaptchaChallenge | null;
  answer: string;
  onAnswerChange: (value: string) => void;
};

export function CaptchaChallengeField({
  challenge,
  answer,
  onAnswerChange,
}: CaptchaChallengeFieldProps) {
  if (!challenge) {
    return null;
  }

  return (
    <div className="platform-banner platform-banner--info grid gap-3">
      <div className="text-sm leading-6">{challenge.promptText}</div>
      <img
        src={challenge.imageDataUrl}
        alt="图形验证码"
        className="platform-subpanel h-14 w-40 rounded-2xl object-cover"
      />
      <input
        className="platform-input h-11"
        value={answer}
        placeholder="输入图形验证码"
        onChange={(event) => onAnswerChange(event.target.value)}
      />
    </div>
  );
}