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

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

export function OnboardingNavigation({ onBack, onNext, isLastStep, canSubmit, loading }: OnboardingNavigationProps) {
  return (
    <div className="mt-8 flex items-center justify-between">
      <Button
        type="button"
        variant="secondary"
        onClick={onBack}
        disabled={loading}
        className="flex items-center gap-2"
      >
        <span>←</span>
        Back
      </Button>

      {!isLastStep ? (
        <Button
          type="button"
          variant="primary"
          onClick={onNext}
          disabled={loading}
          className="flex items-center gap-2"
        >
          Continue
          <span>→</span>
        </Button>
      ) : (
        <Button
          type="submit"
          variant="primary"
          disabled={loading || !canSubmit}
          className="flex items-center gap-2"
        >
          {loading ? (
            <>
              <span className="animate-spin">⟳</span>
              Creating Profile...
            </>
          ) : (
            <>
              <span>✓</span>
              Complete Setup
            </>
          )}
        </Button>
      )}
    </div>
  );
}