gridpilot.gg/apps/website/components/onboarding/OnboardingPrimaryActions.tsx

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

interface OnboardingPrimaryActionsProps {
  onBack?: () => void;
  onNext?: () => void;
  nextLabel?: string;
  isLastStep?: boolean;
  canNext?: boolean;
  isLoading?: boolean;
  type?: 'button' | 'submit';
}

/**
 * OnboardingPrimaryActions
 * 
 * Semantic component for the main navigation actions in the onboarding flow.
 */
export function OnboardingPrimaryActions({
  onBack,
  onNext,
  nextLabel = 'Continue',
  isLastStep = false,
  canNext = true,
  isLoading = false,
  type = 'button',
}: OnboardingPrimaryActionsProps) {
  return (
    <Stack direction="row" justify="between" mt={8} gap={4}>
      {onBack ? (
        <Button
          type="button"
          variant="secondary"
          onClick={onBack}
          disabled={isLoading}
          icon={<Icon icon={ChevronLeft} size={4} />}
        >
          Back
        </Button>
      ) : (
        <Stack />
      )}

      <Button
        type={type}
        variant="primary"
        onClick={onNext}
        disabled={isLoading || !canNext}
        w="40"
        data-testid={isLastStep ? 'complete-onboarding-btn' : 'next-btn'}
      >
        <Stack direction="row" align="center" gap={2}>
          {isLoading ? 'Processing...' : isLastStep ? 'Complete Setup' : nextLabel}
          {!isLoading && (isLastStep ? <Icon icon={Check} size={4} /> : <Icon icon={ChevronRight} size={4} />)}
        </Stack>
      </Button>
    </Stack>
  );
}