import React, { memo } from 'react';
import { Platform } from 'react-native';
import { Button } from '../../common/components/button';
import { SBox } from '../../common/s-components/layout/s-box';

type TProps = {
  onNextClick: () => void;
  btnText: string;
  // variant: string;
};

export const NextButtonGroup: React.FC<TProps> = memo(props => {
  const { onNextClick, btnText } = props;
  const marginBottom = Platform.OS === 'ios' ? 50 : 16;

  return (
    <SBox>
      <SBox mb={marginBottom} position="relative" px={16}>
        <Button
          testID="next-button"
          variant="primary"
          onPress={onNextClick}
          width={1}
          position="relative"
          top={-1}
        >
          {btnText}
        </Button>
      </SBox>
    </SBox>
  );
});