import { Dimensions } from 'react-native'
import { RFValue } from 'react-native-responsive-fontsize'
import styled from 'styled-components/native'

export const Container = styled.View`
  margin: ${RFValue(8)}px 0px;
  flex: 1;
  justify-content: center;
`

export const Label = styled.Text`
  margin-bottom: ${RFValue(4)}px;
  flex: 1;
  max-width: ${Dimensions.get('window').width / 2.5}px;
`
export const Row = styled.View`
  flex-direction: row;
  flex: 1;
  align-items: center;
`

interface ContentProps {
  active: boolean
}
export const Content = styled.TouchableOpacity.attrs({
  activeOpacity: 0.8,
})<ContentProps>`
  margin-left: ${RFValue(20)}px;
  flex-direction: row;
  align-items: center;
  justify-content: ${({ active }) => (active ? 'flex-end' : 'flex-start')};
  background-color: ${({ theme, active }) =>
    active ? theme.colors.primary + 'A7' : theme.colors.gray300};
  border-radius: ${RFValue(12)}px;
  height: ${RFValue(22)}px;
  width: ${RFValue(40)}px;
  border-width: ${RFValue(4)}px;
  border-radius: ${RFValue(12)}px;
  border-color: ${({ theme }) => theme.colors.gray300};
`
export const SwitchFill = styled.View`
  background-color: ${({ theme }) => theme.colors.primary};
  border-radius: ${RFValue(10)}px;
  width: ${RFValue(18)}px;
  height: ${RFValue(18)}px;
`

export const ErrorMessage = styled.Text`
  color: ${({ theme }) => theme.colors.danger};
  font-size: ${RFValue(10)}px;
  margin-top: ${RFValue(4)}px;
  text-align: left;
`