'use client';

import { Button } from '@/components/ui/button';

type AuthSubmitButtonProps = {
  pending: boolean;
  pendingLabel: string;
  label: string;
};

export default function AuthSubmitButton({
  pending,
  pendingLabel,
  label,
}: AuthSubmitButtonProps) {
  return (
    <Button
      type="submit"
      className="w-full h-11 text-sm font-semibold transition-all active:scale-[0.98]"
      disabled={pending}
    >
      {pending ? (
        <span className="flex items-center gap-2">
          <svg className="animate-spin h-4 w-4" viewBox="0 0 24 24">
            <circle
              className="opacity-25"
              cx="12"
              cy="12"
              r="10"
              stroke="currentColor"
              strokeWidth="4"
              fill="none"
            />
            <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>
          {pendingLabel}
        </span>
      ) : (
        label
      )}
    </Button>
  );
}