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="grid gap-3 rounded-2xl border border-sky-300/20 bg-sky-500/10 px-4 py-4">
      <div className="text-sm leading-6 text-sky-100">{challenge.promptText}</div>
      <img
        src={challenge.imageDataUrl}
        alt="图形验证码"
        className="h-14 w-40 rounded-2xl border border-white/10 bg-black/20 object-cover"
      />
      <input
        className="h-11 rounded-2xl border border-white/10 bg-black/30 px-4 text-base text-zinc-100 outline-none transition focus:border-sky-300/45 focus:bg-black/40"
        value={answer}
        placeholder="输入图形验证码"
        onChange={(event) => onAnswerChange(event.target.value)}
      />
    </div>
  );
}