// app/components/admin/CommonComponents/ConnectionTestButton.tsx
'use client';

interface ConnectionTestButtonProps {
  onTest:       () => Promise<void> | void;
  testing:      boolean;
  label:        string;
  testingLabel: string;
  successMessage?: string | null;
  className?: string;
}

const Spinner = () => (
  <svg className="animate-spin -ml-1 mr-2 h-4 w-4 text-white" fill="none" viewBox="0 0 24 24">
    <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
    <path className="opacity-75" fill="currentColor"
      d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
  </svg>
);

export default function ConnectionTestButton({
  onTest,
  testing,
  label,
  testingLabel,
  successMessage,
  className = '',
}: ConnectionTestButtonProps) {
  return (
    <div className={`space-y-3 ${className}`}>
      <button
        type="button"
        onClick={onTest}
        disabled={testing}
        className="inline-flex items-center px-4 py-2 text-sm font-medium text-white bg-var-success rounded-xl hover:bg-var-success/90 transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed"
      >
        {testing ? (
          <>
            <Spinner />
            {testingLabel}
          </>
        ) : (
          label
        )}
      </button>

      {successMessage && (
        <div className="p-3 bg-var-success-bg border border-var-success-border rounded-xl">
          <div className="flex items-start gap-2">
            <svg className="w-5 h-5 text-var-success mt-0.5 shrink-0" fill="currentColor" viewBox="0 0 20 20">
              <path fillRule="evenodd"
                d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
                clipRule="evenodd" />
            </svg>
            <p className="text-sm text-var-success-text">{successMessage}</p>
          </div>
        </div>
      )}
    </div>
  );
}