import styled from '@emotion/native';
import Box from '../Box';
import Icon from '../Icon';

const StyledWrapper = styled.TouchableOpacity(({ theme }) => ({
  alignSelf: 'flex-start',
  position: 'absolute',
  left: '50%',
  zIndex: 9999,
  flexDirection: 'row',
  justifyContent: 'center',
  alignItems: 'center',
  padding: theme.__hd__.floatingIsland.space.wrapperPadding,
  borderRadius: theme.__hd__.floatingIsland.radii.wrapper,
  backgroundColor: theme.__hd__.floatingIsland.colors.wrapperBackground,
  top: theme.__hd__.floatingIsland.space.wrapperTop,
  ...theme.__hd__.floatingIsland.shadows.wrapper,
}));

const StyledPrefixWrapper = styled(Box)(({ theme }) => ({
  marginRight: theme.__hd__.floatingIsland.space.prefixMarginRight,
}));

const StyledSuffixWrapper = styled(Box)(({ theme }) => ({
  marginLeft: theme.__hd__.floatingIsland.space.suffixMarginLeft,
}));

const StyledIcon = styled(Icon)(({ theme }) => ({
  padding: theme.__hd__.floatingIsland.space.iconPadding,
}));

export { StyledWrapper, StyledPrefixWrapper, StyledSuffixWrapper, StyledIcon };