import styled, { css } from 'styled-components/native'
import { RFValue } from 'react-native-responsive-fontsize'
import { ButtonTypes } from '.'

interface ContainerProps {
  style?: ButtonTypes
}

export const Container = styled.TouchableOpacity<ContainerProps>`
  background-color: ${({ theme, style }) =>
    style === 'gray' ? theme.colors.gray400 : theme.colors.primary};

  border-radius: ${RFValue(30)}px;
  width: 100%;
  padding: ${RFValue(12)}px;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  margin-top: ${RFValue(10)}px;
`
export const Title = styled.Text`
  font-size: ${RFValue(12)}px;
  font-weight: bold;
  color: ${({ theme }) => theme.colors.text};
  margin-right: ${RFValue(5)}px;
`