import { RefreshCw } from 'lucide-react';

interface CaptchaImageProps {
  base64: string;
  width: number;
  height: number;
  isLoading: boolean;
  onRefresh: () => void;
}

export function CaptchaImage({ base64, width, height, isLoading, onRefresh }: CaptchaImageProps) {
  const displayW = Math.min(width, 140);
  const displayH = Math.min(height, 48);

  return (
    <button
      type="button"
      onClick={onRefresh}
      className="shrink-0 overflow-hidden rounded-lg border"
      style={{ width: displayW, height: displayH }}
      title="Refresh captcha"
    >
      {isLoading ? (
        <div className="flex size-full items-center justify-center bg-muted">
          <RefreshCw className="size-3.5 animate-spin text-muted-foreground" />
        </div>
      ) : base64 ? (
        <img src={`${base64}`} alt="Captcha" className="size-full object-cover" draggable={false} />
      ) : (
        <div className="flex size-full items-center justify-center bg-muted">
          <span className="text-xs text-muted-foreground">Load failed</span>
        </div>
      )}
    </button>
  );
}
