import { Button } from '@/ui/Button';
import { ButtonGroup } from '@/ui/ButtonGroup';

interface OnboardingNavigationProps {
  onBack: () => void;
  onNext?: () => void;
  isLastStep: boolean;
  canSubmit: boolean;
  loading: boolean;
}

export function OnboardingNavigation({ onBack, onNext, isLastStep, canSubmit, loading }: OnboardingNavigationProps) {
  return (
    <ButtonGroup alignment="between" marginTop={8}>
      <Button
        type="button"
        variant="secondary"
        onClick={onBack}
        disabled={loading}
      >
        ← Back
      </Button>

      {!isLastStep ? (
        <Button
          type="button"
          variant="primary"
          onClick={onNext}
          disabled={loading}
        >
          Continue →
        </Button>
      ) : (
        <Button
          type="submit"
          variant="primary"
          disabled={loading || !canSubmit}
          isLoading={loading}
        >
          {loading ? 'Creating Profile...' : '✓ Complete Setup'}
        </Button>
      )}
    </ButtonGroup>
  );
}