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

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 (
    <ButtonGroup alignment={onBack ? 'between' : 'end'} marginTop={8}>
      {onBack && (
        <Button
          type="button"
          variant="secondary"
          onClick={onBack}
          disabled={isLoading}
        >
          {backLabel}
        </Button>
      )}

      <Button
        type={type}
        variant="primary"
        onClick={onNext}
        disabled={isLoading || !canNext}
        isLoading={isLoading}
      >
        {isLastStep ? 'Complete Setup' : nextLabel}
      </Button>
    </ButtonGroup>
  );
}