import React from 'react';
import styles from './StepNavigation.module.css';

function StepNavigation({
  currentStep,
  onNext,
  onBack,
  onSubmit,
  onDone,
  canProceed,
  canGoBack,
  isSubmitting,
  submissionError,
}) {
  const renderButtons = () => {
    switch (currentStep) {
      case 'select':
      case 'modify':
        return (
          <div className={styles.buttonGroup}>
            <button
              onClick={onBack}
              disabled={!canGoBack}
              className={`${styles.navButton} ${styles.backButton}`}
            >
              <span className={styles.buttonIcon}>←</span>
              Back
            </button>
            <button
              onClick={onNext}
              disabled={!canProceed}
              className={`${styles.navButton} ${styles.nextButton}`}
            >
              {currentStep === 'select' ? 'Next' : 'Review'}
              <span className={styles.buttonIcon}>→</span>
            </button>
          </div>
        );
      case 'confirm':
        return (
          <div className={styles.buttonGroup}>
            <button
              onClick={onBack}
              className={`${styles.navButton} ${styles.backButton}`}
            >
              <span className={styles.buttonIcon}>←</span>
              Back
            </button>
            <button
              onClick={onSubmit}
              disabled={isSubmitting}
              className={`${styles.navButton} ${styles.submitButton}`}
            >
              {isSubmitting ? (
                <>
                  <span className={styles.buttonIcon}>⏳</span>
                  Updating...
                </>
              ) : (
                <>
                  <span className={styles.buttonIcon}>✓</span>
                  Update Contact
                </>
              )}
            </button>
          </div>
        );
      case 'result':
        return (
          <button
            onClick={onDone}
            className={`${styles.navButton} ${styles.doneButton}`}
          >
            <span className={styles.buttonIcon}>🏁</span>
            Done
          </button>
        );
      default:
        return null;
    }
  };

  return (
    <div className={styles.navigation}>
      {renderButtons()}
      {submissionError && (
        <span className={styles.error}>{submissionError}</span>
      )}
    </div>
  );
}

export default StepNavigation;