import { RFValue } from 'react-native-responsive-fontsize'
import styled from 'styled-components/native'
import Feather from 'react-native-vector-icons/Feather'

export const Container = styled.View`
  padding: ${RFValue(10)}px 0px;
`

export const InputText = styled.TextInput`
  width: 100%;
  height: 100%;
  padding: ${RFValue(20)}px;
  flex: 1;
`
export const ErrorMessage = styled.Text`
  color: ${({ theme }) => theme.colors.danger};
  font-size: ${RFValue(10)}px;
  margin-top: ${RFValue(4)}px;
  text-align: right;
`

export const InputContainer = styled.View`
  flex-direction: row;
  background-color: ${({ theme }) => theme.colors.gray300};

  border-radius: ${RFValue(50)}px;
`
export const Label = styled.Text`
  margin-bottom: ${RFValue(4)}px;
`

export const ButtonIcon = styled.TouchableOpacity`
  align-items: center;
  justify-content: center;
  margin-right: ${RFValue(15)}px;
`

export const EyeIcon = styled(Feather).attrs({
  name: 'eye',
  size: RFValue(20),
  color: '#000',
})``

export const EyeOffIcon = styled(Feather).attrs({
  name: 'eye-off',
  size: RFValue(20),
  color: '#000',
})``

export const CalendarIcon = styled(Feather).attrs(({}) => ({
  name: 'calendar',
  size: RFValue(20),
  color: '#000',
}))``