"use strict";

import React from 'react';
import styled from 'styled-components/native';
import { TouchableOpacity, View, StyleSheet, PixelRatio } from 'react-native';
import Loader from './Loader';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const CustomButton = styled(TouchableOpacity)`
  border-width: ${({
  variant
}) => variant === 'outlined' ? 1 : 0}px;
  border-color: ${({
  backgroundColor
}) => backgroundColor || '#0052CD'};
  border-radius: 20px;
  background-color: ${({
  variant,
  backgroundColor
}) => variant === 'filled' ? backgroundColor || '#0052CD' : 'transparent'};
  flex-direction: row;
  justify-content: center;
  align-items: center;
  height: 40px;
  width: 40px;
  margin: 0 10px;
  padding-horizontal: 8px;
  opacity: ${({
  disabled
}) => disabled ? 0.6 : 1};
`;
const ButtonText = styled.Text`
  color: ${({
  variant,
  backgroundColor
}) => variant === 'filled' ? '#FFFFFF' : backgroundColor || '#0052CD'};
  font-size: ${PixelRatio.getFontScale() * 14}px;
  font-weight: bold;
`;
const Button = ({
  text,
  EndIcon,
  loading = false,
  disabled = false,
  unstyled = false,
  variant = 'default',
  backgroundColor,
  onPress,
  StartIcon,
  style: containerStyle,
  color,
  children,
  testID,
  accessibilityLabel
}) => {
  return /*#__PURE__*/_jsxs(CustomButton, {
    testID: testID,
    accessibilityLabel: accessibilityLabel,
    style: [containerStyle],
    disabled: disabled || loading,
    onPress: onPress,
    variant: variant,
    backgroundColor: backgroundColor,
    children: [loading && /*#__PURE__*/_jsx(Loader, {
      size: 24
    }), !loading && StartIcon && /*#__PURE__*/_jsx(View, {
      style: styles.icon,
      children: StartIcon
    }), !loading && (children || /*#__PURE__*/_jsx(ButtonText, {
      style: [{
        color: color || 'black'
      }],
      variant: variant,
      backgroundColor: backgroundColor,
      children: text
    })), !loading && EndIcon && /*#__PURE__*/_jsx(View, {
      style: styles.icon,
      children: EndIcon
    })]
  });
};
const styles = StyleSheet.create({
  icon: {
    marginHorizontal: 4
    // maxWidth: '20%',
  }
});
export default Button;
//# sourceMappingURL=Button.js.map