import { Button } from '@/components/ui/button';
import { Text } from '@/components/ui/text';
import React from 'react';

interface FooterButtonsProps {
  step: number;
  setStep: (step: number) => void;
  handleNext: () => void;
  onSubmit?: () => void;
  className?: string;
  backButtonText?: string;
  nextButtonText?: string;
  submitButtonText?: string;
  isSubmitting?: boolean;
  isNextLoading?: boolean;
}

export const FooterButtons: React.FC<FooterButtonsProps> = ({
  step,
  setStep,
  handleNext,
  onSubmit,
  className = '',
  backButtonText = 'Back',
  nextButtonText = 'Next',
  submitButtonText = 'Submit',
  isNextLoading = false,
  isSubmitting = false,
}) => {
  return (
    <Text
      className={`modal-footer flex justify-end items-end footer-modal text-right gap-2 m-0 pr-4 p-2 ${className}`}
    >
      {step > 1 && (
        <Button
          type="button"
          disabled={isSubmitting}
          onClick={() => setStep(step - 1)}
          className="m-0 back-button"
        >
          {backButtonText}
        </Button>
      )}
      {step === 1 && (
        <Button
          type="button"
          disabled={isNextLoading}
          onClick={handleNext}
          className="m-0 primary-button w-40 flex items-center justify-center gap-2"
        >
          {isNextLoading && (
            <span className="h-4 w-4 animate-spin rounded-full border-2 border-white border-t-transparent" />
          )}
          {isNextLoading ? 'Processing...' : nextButtonText}
        </Button>
      )}
      {step === 2 && (
        <Button
          type="submit"
          disabled={isSubmitting}
          className="m-0 primary-button w-40 flex items-center justify-center gap-2"
        >
          {isSubmitting && (
            <span className="h-4 w-4 animate-spin rounded-full border-2 border-white border-t-transparent" />
          )}
          {isSubmitting ? 'Submitting...' : submitButtonText}
        </Button>
      )}
    </Text>
  );
};