import styled from 'styled-components/native';
import {TouchableOpacity} from 'react-native';
import {heightPercentageToDP as hp} from 'react-native-responsive-screen';
import {IProps} from '@components/Button';
import THEME from '@styles/theme';
import FONTS from '@assets/fonts';

export const StyledButton = styled(TouchableOpacity)<IProps>`
  background-color: ${props =>
    props?.variant === 'contained' ? THEME.PRIMARY.LIGHT : 'transparent'};
  padding: ${hp(2)}px;
  border-radius: ${props =>
    props?.variant === 'contained' ? `${hp(1)}px` : 0};
  opacity: ${props => (props?.disabled ? 0.5 : 1)};
`;

export const Label = styled.Text<IProps>`
  color: ${props =>
    props?.variant === 'contained'
      ? THEME.SECONDARY.MAIN
      : props?.variant === 'text'
      ? THEME.PRIMARY.LIGHT
      : THEME.SECONDARY.MAIN};
  text-align: center;
  font-size: ${hp(2)}px;
  font-family: ${FONTS.BOLD};
`;