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`
  flex-direction: row;
  align-items: center;
  margin-bottom: ${RFValue(10)}px;
`

export const CheckboxContainer = styled.TouchableOpacity`
  background-color: ${({ theme }) => theme.colors.gray300};
  height: ${RFValue(20)}px;
  width: ${RFValue(20)}px;
  border-radius: ${RFValue(4)}px;
  align-items: center;
  justify-content: center;
`

export const CheckboxFill = styled(Feather).attrs({
  name: 'check',
  size: RFValue(16),
  color: '#000',
})``

export const Label = styled.Text`
  font-size: ${RFValue(12)}px;
  margin-left: ${RFValue(8)}px;
`