import React from 'react';
import { View } from 'react-native';
import { ButtonComponent, ButtonText } from './button.style';

interface IPropsButton
   extends React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement> {
   ref?: React.MutableRefObject<any>;
   onPress?: () => void;
   rounded?: boolean;
   outline?: boolean;
   type?: 'submit' | 'reset' | 'button';
   size?: 'lg' | 'md' | 'sm';
   variant?: 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | 'link';
   rest?: any;
   testID?: string;
}

export const Button: React.FunctionComponent<IPropsButton> = ({
   ref,
   onPress,
   testID,
   rounded,
   outline,
   type = 'button',
   size = 'medium',
   variant = 'primary',
   children,
   ...rest
}) => {
   return (
      <ButtonComponent
         variant={variant}
         onPress={onPress}
         outline={outline}
         ripple="#fff"
         rounded={rounded}
         size={size}
      >
         <ButtonText variant={variant} outline={outline} size={size} testID={testID}>
            {children}
         </ButtonText>
      </ButtonComponent>
   );
};
