import cn from 'classnames';
import React, { FC } from 'react';
import { TouchableOpacity, Text } from 'react-native';

import button from './Button.styles';

type props = {
  classNames?: string;
  children: string;
  variant: 'primary' | 'secondary' | 'ternary' | 'text';
  disabled?: boolean;
  onPress: () => void;
};

const Button: FC<props> = ({ children, variant, onPress, disabled, classNames }) => {
  const variantClasses = button.variant[variant];
  return (
    <TouchableOpacity
      disabled={disabled}
      onPress={onPress}
      className={cn(variantClasses.div, classNames, 'rounded', {
        'border-disabled-button bg-disabled-button': disabled && variant !== 'text',
      })}
    >
      <Text
        className={cn(variantClasses.text, 'text-center', {
          'text-white': disabled && variant !== 'text',
        })}
      >
        {variant === 'text' ? children.toLocaleUpperCase() : children}
      </Text>
    </TouchableOpacity>
  );
};

export default Button;
