claudetools/projects/msp-tools/quote-wizard/frontend/src/components/wizard/WizardNavigation.tsx

import { ChevronLeft, ChevronRight } from 'lucide-react';
import { Button } from '@/components/ui';

export interface WizardNavigationProps {
  onNext: () => void;
  onPrev: () => void;
  onSubmit?: () => void;
  isFirstStep: boolean;
  isLastStep: boolean;
  isNextDisabled?: boolean;
  isSubmitting?: boolean;
}

export function WizardNavigation({
  onNext,
  onPrev,
  onSubmit,
  isFirstStep,
  isLastStep,
  isNextDisabled = false,
  isSubmitting = false,
}: WizardNavigationProps) {
  return (
    <div className="flex items-center justify-between pt-6 mt-6 border-t border-gray-200">
      <Button
        type="button"
        variant="outline"
        onClick={onPrev}
        disabled={isFirstStep}
        className={isFirstStep ? 'invisible' : ''}
      >
        <ChevronLeft className="w-4 h-4 mr-1" />
        Previous
      </Button>

      {isLastStep ? (
        <Button
          type="button"
          variant="primary"
          onClick={onSubmit}
          isLoading={isSubmitting}
          disabled={isNextDisabled || isSubmitting}
        >
          Get My Quote
        </Button>
      ) : (
        <Button
          type="button"
          variant="primary"
          onClick={onNext}
          disabled={isNextDisabled}
        >
          Next
          <ChevronRight className="w-4 h-4 ml-1" />
        </Button>
      )}
    </div>
  );
}