import styled from '@emotion/native';
import { TouchableOpacity, View } from 'react-native';

import Typography from '../../Typography';

export const ButtonContainer = styled(TouchableOpacity)(({ theme }) => ({
  width: '100%',
  flexDirection: 'row',
  justifyContent: 'center',
  alignItems: 'center',
  padding: theme.__hd__.button.space.utilityPadding,
  borderRadius: theme.__hd__.button.radii.utilityRadii,
  backgroundColor: theme.__hd__.button.colors.utilityBackground,
}));

export const IconWrapper = styled(View)(({ theme }) => ({
  paddingRight: theme.__hd__.button.space.default.iconPadding,
}));

export const ButtonText = styled(Typography.Body)(({ theme }) => ({
  flexShrink: 1,
  textAlign: 'center',
  textAlignVertical: 'center',
  lineHeight: theme.__hd__.button.lineHeights.utilityButtonText,
}));