import { Loader2 } from "lucide-react";
import { cn } from "@/lib/utils";

interface ExecuteButtonProps {
  onClick: () => void;
  disabled?: boolean;
  loading?: boolean;
}

export function ExecuteButton({ onClick, disabled, loading }: ExecuteButtonProps) {
  return (
    <button
      data-testid="button-execute"
      onClick={onClick}
      disabled={disabled || loading}
      className={cn(
        "group relative w-full py-3.5 px-6 rounded-md font-mono text-[15px] font-bold tracking-[0.05em] transition-all duration-200",
        loading
          ? "bg-white text-black go-pulse"
          : "bg-white text-black hover:bg-white/90 active:scale-[0.995]",
        "disabled:bg-white/[0.04] disabled:text-white/15 disabled:cursor-not-allowed disabled:shadow-none"
      )}
    >
      <div className="flex items-center justify-center gap-2">
        {loading ? (
          <>
            <Loader2 className="w-4 h-4 animate-spin" />
            <span>SCANNING...</span>
          </>
        ) : (
          <span>&gt;&gt;GO</span>
        )}
      </div>
    </button>
  );
}