import { StyleSheet } from 'react-native';

export const variants = StyleSheet.create({
  basic: {
    borderWidth: 4 / 4,
    borderRadius: 4 * 2,
    shadowColor: '#000',
    shadowOffset: {
      width: 0,
      height: 2,
    },
    shadowOpacity: 0.25,
    shadowRadius: 3.84,
    elevation: 5,
  },
  primary: {
    backgroundColor: 'white',
    borderColor: '#e0e0e0',
  },
  secondary: {
    backgroundColor: '#101010',
    borderColor: 'transparent',
  },
  outline: {
    backgroundColor: 'transparent',
    borderColor: 'transparent',
    shadowColor: 'transparent',
    shadowOffset: {
      width: 0,
      height: 0,
    },
    shadowOpacity: 0,
    shadowRadius: 0,
    elevation: 0,
  },
  success: {
    backgroundColor: 'green',
    borderColor: 'green',
  },
  danger: {
    backgroundColor: 'red',
    borderColor: 'red',
  },
  small: {
    paddingVertical: 4 * 1.5,
    paddingHorizontal: 4 * 2.5,
  },
  medium: {
    paddingVertical: 4 * 2.5,
    paddingHorizontal: 4 * 3,
  },
  large: {
    paddingVertical: 4 * 3,
    paddingHorizontal: 4 * 4,
  },
});

export const variantTexts = StyleSheet.create({
  basic: {
    textAlign: 'center',
    textTransform: 'capitalize',
  },
  primary: {
    color: '#101010',
  },
  secondary: {
    color: 'white',
  },
  outline: {
    color: '#101010',
  },
  success: {
    color: 'white',
  },
  danger: {
    color: 'white',
  },
});

export const innerBorders = StyleSheet.create({
  basic: {
    borderWidth: 2,
    borderRadius: 4 * 1.5,
    margin: 4,
  },
  primary: {
    borderColor: '#101010',
  },
  secondary: {
    borderColor: 'white',
  },
  outline: {
    borderColor: '#101010',
  },
  success: {
    borderColor: 'white',
  },
  danger: {
    borderColor: 'white',
  },
});