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

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

export function OnboardingCTA({
  onBack,
  onNext,
  nextLabel = 'Continue',
  backLabel = 'Back',
  isLastStep = false,
  canNext = true,
  isLoading = false,
  type = 'button',
}: OnboardingCTAProps) {
  return (
    <Stack direction="row" justify="between" mt={8} gap={4}>
      {onBack ? (
        <Button
          type="button"
          variant="secondary"
          onClick={onBack}
          disabled={isLoading}
          className="px-8"
        >
          {backLabel}
        </Button>
      ) : (
        <div />
      )}

      <Button
        type={type}
        variant="primary"
        onClick={onNext}
        disabled={isLoading || !canNext}
        className="px-8 min-w-[140px]"
      >
        {isLoading ? (
          <Stack direction="row" gap={2} align="center">
            <span className="animate-spin">⟳</span>
            <span>Processing...</span>
          </Stack>
        ) : (
          isLastStep ? 'Complete Setup' : nextLabel
        )}
      </Button>
    </Stack>
  );
}
