import { RefreshCwIcon } from "lucide-react";
import { Button } from "@/components/ui/button";
import type { CaptchaResponse } from "@/client";

interface CaptchaImageProps {
  data: CaptchaResponse;
  onRefresh: () => void;
  isRefreshing: boolean;
}

export function CaptchaImage({ data, onRefresh, isRefreshing }: CaptchaImageProps) {
  return (
    <div className="flex items-center gap-2">
      <img
        src={`data:image/png;base64,${data.base64}`}
        alt="Captcha"
        className="h-9 rounded-md border border-input bg-white"
      />
      <Button
        type="button"
        variant="ghost"
        size="icon-xs"
        onClick={onRefresh}
        disabled={isRefreshing}
        aria-label="Refresh captcha"
      >
        <RefreshCwIcon
          className={`size-3.5 ${isRefreshing ? "animate-spin" : ""}`}
          data-icon="inline-start"
        />
      </Button>
    </div>
  );
}
